Attribute Directives In Angular 2 - Part Twelve

In this article, we are going to learn about Attribute Directives. Attribute Directives change the behavior of the DOM element and we are going to be learning about ngclass and ngstyle built in directives in the article.

ngclass is used to dynamically apply multiple classes to an HTML element. Let’s understand with an example how ngclass works.

Thus, let’s create new classes, which we want to apply for HTML elements, as shown below.

 

Code

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>`,
    styles: [`.classOne{color:white}

           a. .classTwo{background-color:black}`]
})

Now, create a new property, as shown below.

 

Code

export class RathrolaComponent {
    public title = "Tutorials from Rathrola";
    public cone = true;
    public ctwo = true;
}

These are the properties, which we are going to be using to assign these classes to our HTML element.

Here, within our template, create a new paragraph, as shown below.

 

Code

template:`<h2>{{title}}</h2>
<p>ngCLass Paragraph</p>`,

To use ngclass Directive, Directive is going to live within the paragraph tag, as shown below.

 

Code

template:`<h2>{{title}}</h2>
<p [ngClass]="{classOne:cone,classTwo:ctwo}">ngCLass Paragraph</p>`,

ngClass is going to contain a list of classes, which we want to apply based on true or false values of the two properties- cone and ctwo, as shown above.

Note

For HTML tags, we are using ngClass Directive, which is going to list the classes based on the value of cone and ctwo, which are the properties defined in class component.

Refresh the Browser and the output is shown below.

 

Now, we can go to the next extent and create a button tag, as shown below and create an event binding in the button tag.

 

Code

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>
<p [ngClass]="{classOne:cone,classTwo:ctwo}">ngCLass Paragraph</p>
<button (click)="toggle()">Toggle</button>`,
    styles: [`.classOne{color:white}

        a. .classTwo{background-color:black}`]
})

Define the click method in the class component, as shown below.

 

Code

export class RathrolaComponent {
    public title = "Tutorials from Rathrola";
    public cone = true;
    public ctwo = true;
    toggle() {
        this.cone = !this.cone;
        this.ctwo = !this.ctwo;
    }

Save this code, refresh the Browser and see the output, as shown below. 

 

When you click Toggle button, the output will be given, as shown below.

 

ngclass works in this way. 

Let’s create two new properties, as shown below.

 

Code

public style='italic';
public size='30px';

Create another <p> tag in the template, as shown below.

 

Code

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>
<p [ngClass]="{classOne:cone,classTwo:ctwo}">ngCLass Paragraph</p>
<button (click)="toggle()">Toggle</button>
<p [ngStyle]="{'font-style':style,'font-size':size}">ngStyle Paragraph</p>`,
    styles: [`.classOne{color:white}

        a. .classTwo{background-color:black}`]
})

 When we reload the Browser, the ouput is shown below.

 

Thus, when this is executed, this new paragraph will have a font size of 30px and bold style.

It's pretty much about Attribute Directives. We can create custom Structural Directives and Attribute Directives without any issues.

Thanks for reading my article.