Open In App

Class Binding in Angular 8

Improve
Improve
Like Article
Like
Save
Share
Report

Class binding in Angular makes it very easy to set the class property of a view element. We can set or remove the CSS class names from an element’s class attribute with the help of class binding.

We bind a class of a DOM element to a field that is a defined property in our Typescript Code. Its syntax is like that of property binding.

Syntax:

<element [class] = "typescript_property">

Approach:

  • Define a property element in the app.component.ts file.
  • In the app.component.html file, set the class of the HTML element by assigning the property value to the app.component.ts file’s element.

Example 1: Setting the class element using class binding.

app.component.html

HTML




<h1 [class] = "geeky">
  GeeksforGeeks
</h1>
Upper Heading's class is : "{{ g[0].className }}"


app.component.ts

Javascript




import { Component, OnInit } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    geeky = "GeekClass";
    g = document.getElementsByClassName(this.geeky);
}


Output:

Example 2: setting the class element using a function.

app.component.html

HTML




<h1 [class] = "setClass()">
  GeeksforGeeks
</h1>
Upper Heading's class is : "{{ g[0].className }}"


app.component.ts

Javascript




import { Component, OnInit } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    setClass() {
        return "GeeksforGeeks";
    }
    g = document.getElementsByClassName(this.setClass());
}


Output:



Last Updated : 23 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads