Introduction

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

Background

  • 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.
Prerequisites
  • You should have a basic knowledge of Angular.

NgStyle

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. }

NgClass

  • 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>

Summary

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