Hi everyone. In this tutorial I’m gonna talk about Class and Style Bindings in Angular 2.

Let’s remember, in previous tutorial, we wrote a component like this:

import {Component} from '@angular/core';

@Component({
    selector : 'angular2Tutorials',
    template : `<h2>Angular 2 Tutorials</h2>
                <h4></h4>
                <img [src]="imageLink"><br><br>
                <input type="text" value="ilkgunel">`,
    styles: [`h4{
        color:red;
    }`]
})

export class Angular2Tutorials{
    public title = "Header 4 From Angular 2 Tutorials";
    public imageLink = "https://pbs.twimg.com/profile_images/598551481181155329/DqwnzkIE.jpg";
    public courseName = "Angular2";
}

Now, we will change template and styles properties and define a new property in Angular2Tutorials class.

Firstly, let’s take a look at the class binding.

import {Component} from '@angular/core';

@Component({
    selector : 'angular2Tutorials',
    template : `<div [class.myClass]="applyClass">Angular2 Tutorials</div>`,
    styles: [`.myClass{
        color:red;
    }`]
})

export class Angular2Tutorials{
    public applyClass=true;
}

• We defined a div tag in template property. In this div tag, we calling our css class in square brackets like [class.myClass] and assigning a value, applyClass, to this css property.
• In styles property we defined a css class that is myClass. This class only changes color of text to red.
• In Angular2Tutorials class, we defined a property that is applyClass and used it in template property. [class.myClass]=”applyClass” definition checks value of applyClass. If applyClass is equal to true, myClass css property is assigned to class property of div. If it is false, nothing happens.

When I check the main page, I see this. The applyClass property is equal to true and color of text is red.

Now, let’s take a look at style binding. We will define another div tag in template attribute and another property in class. Our component will be like this:

import {Component} from '@angular/core';

@Component({
    selector : 'angular2Tutorials',
    template : `<div [class.myClass]="applyClass">Angular2 Tutorials</div>
                <div [style.color]="applyBlue ? 'blue' : 'orange'">This is style binding.</div>`,
    styles: [`.myClass{
        color:red;
    }`]
})

export class Angular2Tutorials{
    public applyClass=true;
    public applyBlue=true;
} 

• We defined another div tag which has a color style. The color of text is changing according to value of applyBlue. We used again square brackets and called our applyBlue property.
• We used an if-else expression like in programming languages in template attribute. If the value of applyBlue property is equal to true, the color of text will be blue. If not, the color of text will be orange.
• In class body initially, we defined value of applyBlue as true.

When I look at the main page, I see this screen. The color of text that’s in second div is blue.

Now, I change value of applyBlue property to false and check again the main page.The color ot text is orange.

When we finished this tutorial

• We learned CSS class binding in Agular 2
• We learned CSS style binding in Agular 2

Until the next article, take you care.

See you.

With Greetings And Love