Class And Style Bindings In Angular 2

From our previous article, we learned about Data Binding in Angular 2 Application,

I recommend going through my previous articles from the beginning for better understanding.

References,

In this article, we are going to learn how to bind classes and styles to HTML element.

First, let us create a new class, as shown below

Code

@Component({
selector: "my-tuts",
template: `<h2>{{title}}</h2>`,
styles: [`.myClass{
color:red;
}']
})

What does class binding do? It is going to assign a class to HTML elements, which is based on an expression, which evaluates true or false. Let’s create a div tag, as shown below.

<div [class.myClass]=" ">Apply Class Binding</div>`,

Now, to apply class binding, we make use of class property and we use a dot, followed by the class, which we want to apply or not apply based on the condition.

Here, my class to apply is myClass, as shown above.

Class is going to be assigned to div tag, which is based on a variable of true or false.

Let us create a variable, as shown below.

Now, apply this variable in div component, as shown below.

<div [class.myClass]="applyclass">Apply Class Binding</div>`,

If the variable is true, then assigned div tag will have Red color.

When we save and run the Application, the output will be, as shown below.

That’s how class binding works. Similarly, we have style binding in order to apply inline styles to HTML elements.

Let’s create another property, as shown below.

Code

export class RathrolaComponent {
public title = "Tutorials from Rathrola";
public applyclass = true;
public applyblue = true;
}

Now, let’s create another div tag, as shown below.

Code

<div [style.color]="applyblue?'blue':orange">Blue</div>`,

In order to specify inline styles by style binding, we are going to be making use of square brackets again, as shown above.

We can also write something like if condition in div tag, as shown below.

<div [style.color]="applyblue?'blue':orange">Blue</div>`,

The output is shown below.

If the two variables are false, as given below.

export class RathrolaComponent {
public title = "Tutorials from Rathrola";
public applyclass = false;
public applyblue = false;
}

The output is shown below.

In our next article, we shall see Event Binding & References.

Thanks for reading my article.

4 Comments

Join the conversation! Your thoughts help the community grow.

Sateeshkumar Pasupuleti9y ago
Thank you so much for sharing this article sir .easy to learn ,understandable,helpful & useful.
- Rathrola Prem Kumar9y ago
  Thanks for your response sateesh
Saravanakumar Sekaran9y ago
Good one keep sharing like this :)
- Rathrola Prem Kumar9y ago
  Sure, Thanks for reading my article and for ur response :).