Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Class and Style Bindings in Angular 2

DZone's Guide to

Class and Style Bindings in Angular 2

In this article, we are going to learn how to bind classes and styles to an HTML element using TypeScript code in the Angular framework.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

From our previous article, we learned about styling components in Angular 2

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

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

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

Image title

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 as true or false. Let’s create a div tag, as shown below.

Image title

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

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

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

Image title

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

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

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

Image title

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.

Image title

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.

Image title

Code

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

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

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

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

The output is shown below: 

Image title

If the two variables are false, we'll use the code given below.

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

The output is shown below.

Image title

In our next article, we'll take a look at Event Binding and References.

Thanks for reading my article!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
angular 2 ,web dev ,web application development ,class binding ,style binding

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}