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;

  }

}