Angular NgStyle Example | NgStyle Directive In Angular 10/9/8

By Hardik Savani | March 31, 2020 | Category : Angular

Hi Dev,

Here, i will show you angular ng style conditional example. This tutorial will give you simple example of ngstyle with condition angular. you will learn ngstyle with condition in angular. In this article, we will implement a *ngstyle condition in angular example.

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

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: