Hello Devs, 

In this tutorial, we will learn Angular 9/8/7 NgStyle Directive Example

*ngStyle allows you to write css on element. In this example i will give you two example one will be simple add css using object and another example of adding css using component function.

Follow this step by step guide below. 



Example 1: ngStyle with a Object:


src/app/app.component.html

<h1>Angular ngStyle Directive Example - ItSolutionstuff.com</h1>

  

<button [ngStyle]="{background: 'red'}">Click Me!</button>


Example 2: ngStyle with a Function


src/app/app.component.html

<h1>Angular ngStyle Directive Example - ItSolutionstuff.com</h1>

  

<button [ngStyle]="addButtonStyles()">Click Me!</button>


src/app/app.component.ts

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

  

@Component({

  selector: 'my-app',

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

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

})

export class AppComponent  {

  

  addButtonStyles(){

    return {

      'background': 'blue',

      'padding': '12px'

    }

  }

  

}


May this example help you.