Styling Built-In Directives Like NgStyle And NgClass - Angular


In this article, you will see the Styling Built-in Directives like NgStyle and NgClass in Angular along with examples.
Article Overview
  • Background
  • Prerequisites
  • NgStyle
  • NgClass
  • Summary 


  • Build-in directives are attributes which we add to HTML element to give dynamic behavior.
  • Angular provides various built-in directives.
  • In this article we’re going to cover conditional directives such as NgStyle and NgClass along with examples of how to use them.
  • You should have a basic knowledge of Angular. 


It is used to set a given DOM element CSS properties from the Angular expressions.
First Approach
The first way to use it is by doing [style.<cssproperty>]="value", as in the following:
  1. <div [style.background-color]="'yellow'">  
  2.      Uses fixed yellow background  
  3. </div>  
Second Approach
The second way to set fixed values is by using NgStyle attribute by using key value pairs for each property you want to set, as like below: 
  1. <div [ngStyle]="{color: 'white', 'background-color': 'blue'}">  
  2.      Uses fixed white text on blue background  
  3. </div>  
Using dynamic values
Example of NgStyle directive with using dynamic values is as following,
  1. <div class="ui input">  
  2.      <input type="text" name="color" value="{{color}}" #colorinput>  
  3. </div>  
  4. <div class="ui input">  
  5.      <input type="text" name="fontSize" value="{{fontSize}}" #fontinput>  
  6. </div>  
  7. <button class="ui primary button" (click)="apply(colorinput.value, fontinput.value)">
  8.      Apply settings
  9. </button>  
  1. <div>  
  2.      <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">red text</span>  
  3. </div>  
  1. apply(color: string, fontSize: number): void {  
  2.      this.color = color;  
  3.      this.fontSize = fontSize;  
  4. }  


  • It is represented by a ngClass attribute in your HTML template.
  • It is used to set and change the CSS classes dynamically for a given DOM element.
First Approach
  • The first way to use this directive is by passing in an object literal.
  • The object is expected by the keys as the class names and the values should be a true/false value to indicate whether the class should be applied or not.
  • Let’s assume that we have a CSS class called bordered to add a dashed black border to an element:
  1. bordered { border: 1px dashed black; background-color: #eee; }  
Now, add two div elements as one always has the bordered class and another one never has it:
  1. <div [ngClass]="{bordered: false}">This is never bordered</div>  
  2. <div [ngClass]="{bordered: true}">This is always bordered</div>  
To make a dynamic assignment, we can add a variable as the value for the object value, as in the following: 
  1. <div [ngClass]="{bordered: isBordered}">  
  2.      Using object literal. Border {{ isBordered ? "ON" : "OFF" }}  
  3. </div>  
Second Approach
Second, we can define a classesObj object in our component:
  1. @Component({  
  2.      selector: 'app-ng-class-example',  
  3.      templateUrl: './ng-class-example.component.html'  
  4. })    
  5. export class NgClassExampleComponent implements OnInit {  
  6.      isBordered: boolean;  
  7.      classesObj: Object;  
  8.      classList: string[];    
  9.      constructor() {  
  10.      }    
  11.      ngOnInit() {  
  12.           this.isBordered = true;  
  13.           this.classList = ['red''round'];  
  14.           this.toggleBorder();  
  15.      }    
  16.      toggleBorder(): void {  
  17.           this.isBordered = !this.isBordered;  
  18.           this.classesObj = {  
  19.           bordered: this.isBordered  
  20.      };  
  21. }  
Use the object directly:
  1. <div [ngClass]="classesObj">  
  2.      Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}  
  3. </div>  


Now, I believe you know the key important things about Built-in Directives, NgStyle, and NgClass in Angular.

Similar Articles