Angular 2 Attribute Directives

In the previous tutorial, I have discussed what are directives in Angular 2, types of angular 2 directives, and also discussed structural directives in detail. But now in this tutorial, I will discuss Attribute directives in Angular 2.

Before going to next, I would recommend you to read the previous tutorial “Structural Directives” for better understanding.

Previous Tutorials

• Introduction to Angular 2 with some core features.
• How to setup Angular 2 with ASP.NET MVC 4 application
• Learn Components in Angular 2.
• Learn Nested Components in Angular 2.
• Structural Directives in Angular 2.

What are Angular 2 Directives?

Basically, the directive is a class which contains metadata which will be attached to the class by the @Directive decorator. It allows you to attach behavior to elements in the DOM.

Types of Angular 2 Directives

There are three types of Angular 2 directive. Component, Structural Directive, Attribute Directive.

Note: – I have defined Components, Structural Directives, and Attribute Directives in the previous tutorial. In this tutorial, we will discuss Attribute directives only.

Attribute Directives in Angular 2.

As we have discussed in the previous tutorial, Attribute directives are responsible for changing the behavior or appearance of DOM elements.

There are two built-in attribute directives ngClass and ngStyle.

ngClass: It controls the appearance of elements by adding and removing CSS classes dynamically.

ngStyle: It can be used to add dynamic styles based on the component state.

Let’s understand Attribute Directives with a simple example.

Note: – I will use the previous project that we have created in the previous tutorials. If you don’t know how to setup angular 2 development environment, then click here.

Step # 1 – Open StructDirective.component.ts file.

Go to solution explorer => App folder => StrucDirective folder => open StrucDirective.component.ts file => then update the file code as it is updated in below.

Let’s understand the above code.

In Line # 8, I have added style property. This style property is used for styling DOM elements. Then after colons, I have created some classes with the names of classOne, classTwo, and classThree. These classes will be used in HTML page for changing the behavior of DOM elements. E.g. It will be used to change font color, font size, font style and etc.

Note: – we are using backticks ( ` ` ) within the square brackets in styles property.  

In Line # 18, I have created a new property with the name of the list and initialized with the false Boolean expression.

In Line # 19, I have created a showList function. This function will be used to show or hide Departments’ list using the button. If a user clicks on the button, then it will show the list. And if the user clicks again, then it will hide the list.

In Line # 29, I have created another property with the name of size and initialized it with the value 30px. This property will be used in HTML page for changing the size of text using ngStyle directive.

Step # 2 – Update HTML file.

In this step, we will update the StrucDirective.component.html file. Go to solution explorer => app folder => StrucDirective folder => open the strucDirective.component.ts file => the update the file code as updated in below.

Let’s understand the above code.

In Line # 18, I have created a button. This button is attached to the showList() function that we have created in the StrucDirective component.

In Line # 19, I have created a div. In this div with *ngIf Structural Directive. As you know we have discussed *ngIf in the previous tutorial.

In Line # 21, I have created the h2 element. The ngClass is used in this element. In the right-hand side of this ngClass attribute directive, we are applying a list of classes that we have created in StrucDirective.component.ts file. The classOne will change the color of text, and the classTwo will change the background color.

In Line # 23, I have created an unordered list. The ngStyle attribute directive is used in this unordered list. This ngStyle attribute will change the size of the list and the size is initialized in the StrucDirective component.

In Line # 25, The ngClass attribute is used again in <li> tag. This will change the font style of list.

Step # 3 – Run your project.

Now there is no need to change anything more. Now simply run your project by pressing (Ctrl + f5) and see the output in your browser.