Angular NgStyle Conditional Example

By Hardik Savani | July 16, 2020 | Category : Angular

In this article we will cover on how to implement angular ng style conditional example. it's simple example of ngstyle conditional angular 9. This article goes in detailed on angular 9 ng style conditional. you can understand a concept of ng style with multiple conditions angular 9. follow bellow step for angular ng style conditional example.

In this tutorial, i will show you some example for how to add conditional style css in angular application. you can easily add condition in ngStyle directive in angular application.

i already posted with simple example of ngStyle, you can also read that article Angular ngStyle Example.

You can easily use ngstyle with condition in angular 6, angular 7, angular 8, angular 9, angular 10 and angular 11 example.

Here, let's see how to use Conditional style with angular application one by one:

Example 1: NgStyle with Condition


<h1>Angular NgStyle Conditional Example -</h1>

<div [ngStyle]="{'color': true ? 'green' : 'red' }">This is condition.</div>

Example 2: NgStyle with condition


<h1>Angular NgStyle Conditional Example -</h1>

<div [ngStyle]="{'color':(country === 'US') ? 'orange' : 'red' }">This is condition.</div>


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


selector: 'my-app',

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

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


export class AppComponent {

name = 'Angular';

country = 'US';


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: