Angular [ngStyle], [style] - Various ways to use: Directly, Method, Object, Conditionally/Dynamically

How to use Angular ngStyle

1. Component - HTML

<div [style.height.px]="90" [style.background-color]="'yellow'">ngStyle - Specific style attributes - [style]</div>

<div [ngStyle]="{'backgroundColor': flag === true ? 'blue' : 'purple','height':'90px'}">ngStyle - Dynamically - use component's property</div>

<div [ngStyle]="{'backgroundColor': 'green','height':'90px'}">ngStyle - Directly</div>

<div [ngStyle]="ngStyleObject"> ngStyle - Use component object property with all css</div>

<div [ngStyle]="getStyle()"> ngStyle - Use component method </div>

2. Component - TS

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  flag = false;

  ngStyleObject = {

    ['backgroundColor']: 'red',

     ['height']: '90px'

  };

  ngStyleMethod = {

    height: '90px',

    backgroundColor: 'orange'

  }

  getStyle(): any {

    return this.ngStyleMethod;

  }

}

(Material Tab Group) Custom Expand/Collapse mat-card

Custom Expand/Collapse mat-card (Mat-tab-group case)

After clicking down arrow:

After clicking down arrow again, show 1st screen.

Prerequisites:

@angular/material v8.2.3

1. Container component - html

 <mat-tab-group mat-stretch-tabs [dynamicHeight]="true" [backgroundColor]="'#fff'">

    <mat-tab label="Tab 1">
        Content 1 <br><br><br> some content...
    </mat-tab>
    <mat-tab label="Tab 2">
        <some-component></some-component>
        <jhi-your-card></jhi-your-card>
    </mat-tab>
</mat-tab-group>

2. Card Component - html

<div  [ngStyle]="myCardStyle" class="main-container" style="color: #1f69c0">

    <mat-card>

        <div>

            <div *ngIf="isExpanded" fxLayout="row" fxLayoutAlign="start center">

                <button (click)=collapseCard() type="button" mat-icon-button matSuffix style="color: #1f69c0">

                    <mat-icon>keyboard_arrow_down</mat-icon>

                </button> Close

            </div>

            <div class="some-label">

                Label 1

            </div>

            <div fxLayout="row" fxLayoutAlign="start center" class="margin">

                <div class="comp-stuff" fxFlex="80" style="color: #1f69c0">

                    Component stuff

                </div>

            </div>

            <div *ngIf="!isExpanded" class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">

                <div fxFlex="53"></div>

                <div fxFlex="47" fxLayoutAlign="end">

                    <button mat-button class="bottom-links full-width">Click Me

                    </button>

                </div>

            </div>

            <div *ngIf="isExpanded" class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">

                <div fxFlex="53"></div>

                <div fxFlex="47" fxLayoutAlign="end">

                    <button mat-button class="bottom-links full-width">Click Me 1

                    </button>

                </div>

            </div>

            <div *ngIf="isExpanded" class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">

                <div fxFlex="53"></div>

                <div fxFlex="47" fxLayoutAlign="end">

                    <button mat-button class="bottom-links full-width">Click Me 2

                    </button>

                </div>

            </div>

            <div *ngIf="isExpanded" class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">

                <div fxFlex="53"></div>

                <div fxFlex="47" fxLayoutAlign="end">

                    <button mat-button class="bottom-links full-width">Click Me 3

                    </button>

                </div>

            </div>

            <div *ngIf="isExpanded" class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">

                <div fxFlex="53"></div>

                <div fxFlex="47" fxLayoutAlign="end">

                    <button mat-button class="bottom-links full-width">Click Me 4

                    </button>

                </div>

            </div>

        </div>

        <br/>

        <div *ngIf="!isExpanded" fxLayout="row" fxLayoutAlign="center center">

            <button (click)=expandCard() type="button" mat-icon-button matSuffix style="color: #1f69c0">

                <mat-icon>keyboard_arrow_down</mat-icon>

            </button>

        </div>

    </mat-card>

</div>

3. Card component - CSS

.main-container {

  padding: 5px;

  width: 100%;

}

div.card-content {

  overflow: hidden;

}

.full-width {

  width: 100%;

}

.button-margin {

  margin-right: 1.5vh;

}

mat-icon {

  margin-left: 1vw;

  margin-top: 1vw;

  font-size: 2.5vh;

}

mat-card {

  margin-left: 1.5vw;

  background-color: white;

  width: 97%;

  margin-bottom: 11vh;

  padding: 3.5vh;

  overflow: scroll;

}

.free-money-label {

  font-size: 2.08vh;

  color: lightgray;

}

.mat-button {

  background-color: darkgray;

  border-radius: 20px;

}

.jhi-last-transaction-entry {

  padding-top: 1.56vh;

  padding-bottom: 1.56vh;

  margin-bottom: 1.5vh;

  margin-top: 1.5vh;

}

.transactions-button {

  font-size: 2.08vh;

  color: #ea485d;

}

.arrow-button {

  img {

    width: 5vw;

    height: 5vw;

  }

}

.free-money {

  font-size: 4.48vh;

  color: #ea485d;

}

.bottom-links {

  font-size: 2.08vh;

  color: white;

}

.margin {

  margin-bottom: 1.5vh;

}

button {

  overflow-x: visible !important;

}

4. Card Component - TS

import {Component, OnInit} from '@angular/core';

@Component({

  selector: 'jhi-your-card',

  templateUrl: './your-card.component.html',

  styleUrls: ['./your-card.component.scss']

})

export class YourCardComponent implements OnInit {

  public myCardStyle = {};

  isExpanded = false;

  expandedCardStyle = {

    ['position']: 'fixed',

    ['z-index']: '1001',

    ['top']: '0',

    ['margin-top']: '13vh',

    ['left']: '0',

    ['width']: '100%',

    ['height']: '80%',

    ['overflow']: 'scroll'

  };

  constructor() {}

  ngOnInit(): void {}

  expandCard(): void {

    this.myCardStyle = this.expandedCardStyle;

    this.isExpanded = true;

  }

  collapseCard(): void {

    this.myCardStyle = {};

    this.isExpanded = false;

  }

}

Custom Expand/Collapse mat-card with ngStyle,CSS

Custom Material Card expand/collapse

After clicking down arrow -->

After clicking down arrow again, show 1st screen.

Prerequisites:

@angular/material v8.2.3

1. Container component - html

<div style="height: 33vh;"  fxLayout="row" fxLayoutAlign="center center">
        <p> Some component....</p>
</div>
<jhi-your-card></jhi-your-card>

2. Card component - html

<div  [ngStyle]="myCardStyle" class="main-container" style="color: #1f69c0">

    <mat-card>

        <div>

            <div *ngIf="isExpanded" fxLayout="row" fxLayoutAlign="start center">

                <button (click)=collapseCard() type="button" mat-icon-button matSuffix style="color: #1f69c0">

                    <mat-icon>keyboard_arrow_down</mat-icon>

                </button> Close

            </div>

            <div class="some-label">

                Label 1

            </div>

            <div fxLayout="row" fxLayoutAlign="start center" class="margin">

                <div class="comp-stuff" fxFlex="80" style="color: #1f69c0">

                    Component stuff

                </div>

            </div>

            <div *ngIf="!isExpanded" class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">

                <div fxFlex="53"></div>

                <div fxFlex="47" fxLayoutAlign="end">

                    <button mat-button class="bottom-links full-width">Click Me

                    </button>

                </div>

            </div>

        </div>

        <br/>

        <div *ngIf="!isExpanded" fxLayout="row" fxLayoutAlign="center center">

            <button (click)=expandCard() type="button" mat-icon-button matSuffix style="color: #1f69c0">

                <mat-icon>keyboard_arrow_down</mat-icon>

            </button>

        </div>

    </mat-card>

</div>

3. Card component - css 

.main-container {
  padding: 5px;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
}
.full-width {
  width: 100%;
}
.button-margin {
  margin-right: 1.5vh;
}
mat-icon {
  margin-left: 1vw;
  margin-top: 1vw;
  font-size: 2.5vh;
}
mat-card {
  background-color: white;
  width: 95%;
  margin-bottom: 11vh;
  padding: 3.5vh;
}
.some-label {
  font-size: 2.08vh;
  color: lightgray;
}
.mat-button {
  background-color: darkgray;
  border-radius: 20px;
}
.comp-stuff {
  font-size: 4.48vh;
}
.bottom-links {
  font-size: 2.08vh;
  color: white;
}
.margin {
  margin-bottom: 1.5vh;
}
button {
  overflow-x: hidden !important;
}

4. Card component - ts

import {Component, OnInit} from '@angular/core';

@Component({

  selector: 'jhi-your-card',

  templateUrl: './your-card.component.html',

  styleUrls: ['./your-card.component.scss']

})

export class YourCardComponent implements OnInit {

  public myCardStyle = {};

  isExpanded = false;

  expandedCardStyle = {

    ['position']: 'absolute',

    ['z-index']: '10',

    ['top']: '0',

    ['left']: '0',

    ['width']: '100%',

    ['height']: '90%'

  };

  constructor() {}

  ngOnInit(): void {}

  expandCard(): void {

    this.myCardStyle = this.expandedCardStyle;

    this.isExpanded = true;

  }

  collapseCard(): void {

    this.myCardStyle = {};

    this.isExpanded = false;

  }

}