Angular Dynamic Style CSS with Example

In this blog post, we’ll explore Angular dynamic style CSS with example in component’s styles based on certain conditions. Sometimes in our application we want dynamically change the color, size, font, background images so Angular provides various ways to conditionally apply styles to elements. In this post, we’ll explore three different ways to do so. We’ll discuss how to use the angular ngClass, element’s style property and angular ngStyle conditionally to achieve this.

Angular conditional style using ngStyle

One way to conditionally apply styles in Angular is to use the ngStyle directive. The ngStyle directive can be used to set one or more style properties for an element. The style properties are set based on a given expression. If the expression evaluates to true, the corresponding style property is set. Otherwise, the property is unset.

The following example shows how to use the ngStyle directive to set the background-color style property for an element if the changeColor variable is true.

<a [ngStyle]="{'background-color': changeColor ? 'red' : 'white'}"> </a>

This div will be red if the changeColor variable is true.

The ngStyle directive allows you to dynamically update inline styles based on certain conditions. For example, let’s say we have a component with two inline styles: color:blue and margin:10px. We can use the ngStyle directive to conditionally update these styles like so

 
<a [ngStyle]="{'margin':'20px','color':'blue'}"> </a>

let understand Angular Dynamic Style CSS with Example

Step 1 : Create an angular app

First step is to setup an angular app using below command

ng new example-app

Step 2: Create a Component

Create a component and a method

ng g c hello-world

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css'],
})
export class HelloWorldComponent implements OnInit {
  dyanmicCssObject:any ={'margin':'20px','color':'blue'};
  changeColor:boolean=false;
  constructor() {
  }
  onChangeColor() {
    this.changeColor = !this.changeColor;
  }
  ngOnInit() {}
}

Here we used to changeColor method to change the color

Step 3 : Create template and add html

Now, add simple html template with input field

<h2>Angular Dynamic Style CSS with Example- Readerstacks.com</h2>

<div [ngStyle]="dyanmicCssObject"> Dynamic Object COlor </div>
 
<div [ngStyle]="{'background-color': ? 'red' : 'white'}"> Dynamic varibale COlor</div>
<a  href="#" (click)='onChangeColor()'>Change</a>

Angular conditional CSS using ngClass

let’s take a look at how to use the ngClass directive. The ngClass directive allows you to dynamically add or remove CSS classes based on certain conditions. For example, let’s say we have a component with two CSS classes: .red and .blue. We can use the ngClass directive to conditionally add or remove these classes like so:

<a  [ngClass]="{'red':true, 'blue':false}">
This div will have the class "red" and not the class "blue".> </a>

Finally, another way to conditionally apply styles in Angular is to use the element’s style property. The element’s style property can be used to set inline styles for an element. The styles are set based on a given expression. If the expression evaluates to true, the corresponding style is set. Otherwise, the style is unset.

The following example shows how to use the element’s style property to set the background-color style for an element if the isActive variable is true.

<a  [style.backgroundColor]="changeColor ? 'red' : 'white'">
This div will have the class "red" and not the class "blue".> </a>

Conclusion

No matter which approach you choose, Angular gives you the power to conditionally apply styles to elements.As you can see, the ngClass and ngStyle directives give us a way to dynamically update our Angular component’s styles based on certain conditions.