Angular 9/8/7 NgStyle Directive Example

April 25, 2020 | Category : Angular

Hi Dev,

This article will provide some of the most important example ngstyle with condition in angular. you can see *ngstyle condition in angular 9/8/7 example. This article will give you simple example of angular ngStyle directive example. step by step explain angular 9/8/7 *ngstyle example. Here, Creating a basic example of angular ng style conditional example.

You can easily use ng style in angular 6, angular 7, angular 8 and angular 9 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.

Let's see bellow example angular ngStyle directive example.

Example 1: ngStyle with a Object


<h1>Angular ngStyle Directive Example -</h1>

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

Example 2: ngStyle with a Function


<h1>Angular ngStyle Directive Example -</h1>

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



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


selector: 'my-app',

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

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


export class AppComponent {


return {

'background': 'blue',

'padding': '12px'




I hope it can help you...