Angular NgStyle Conditional Example

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, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 example.

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

Example 1: NgStyle with Condition

src/app/app.component.html

<h1>Angular NgStyle Conditional Example - ItSolutionStuff.com</h1>
  
<div [ngStyle]="{'color': true ? 'green' : 'red' }">This is condition.</div>

Example 2: NgStyle with condition

src/app/app.component.html

<h1>Angular NgStyle Conditional Example - ItSolutionStuff.com</h1>
  
<div [ngStyle]="{'color':(country === 'US') ? 'orange' : 'red' }">This is condition.</div>

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  {
  name = 'Angular';
 
  country = 'US';
}

I hope it can help you...