Styling Built-In Directives Like NgStyle And NgClass - Angular

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:

<div [style.background-color]="'yellow'">
     Uses fixed yellow background
</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: 

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
     Uses fixed white text on blue background
</div>

Using dynamic values

 

Example of NgStyle directive with using dynamic values is as following,

<div class="ui input">
     <input type="text" name="color" value="{{color}}" #colorinput>
</div>
<div class="ui input">
     <input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
</div>
<button class="ui primary button" (click)="apply(colorinput.value, fontinput.value)">
     Apply settings
</button>

<div>
     <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">red text</span>
</div>

apply(color: string, fontSize: number): void {
     this.color = color;
     this.fontSize = fontSize;
}

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:

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:

<div [ngClass]="{bordered: false}">This is never bordered</div>
<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: 

<div [ngClass]="{bordered: isBordered}">
     Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>

Second Approach

 

Second, we can define a classesObj object in our component:

@Component({
     selector: 'app-ng-class-example',
     templateUrl: './ng-class-example.component.html'
})
export class NgClassExampleComponent implements OnInit {
     isBordered: boolean;
     classesObj: Object;
     classList: string[];
     constructor() {
     }
     ngOnInit() {
          this.isBordered = true;
          this.classList = ['red', 'round'];
          this.toggleBorder();
     }
     toggleBorder(): void {
          this.isBordered = !this.isBordered;
          this.classesObj = {
          bordered: this.isBordered
     };
}

Use the object directly:

<div [ngClass]="classesObj">
     Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>

Summary

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