In the previous tutorial, I have discussed Nested components in Angular 2. But now in this tutorial, I will discuss Angular 2 Directives with very simple examples. In this tutorial, I will cover some basic questions such as what are directives in Angular 2? types of Angular 2 Directives? How to use Directives in Angular 2?
Before going to next, I would recommend you to read the previous tutorial Nested Components in Angular 2.
- 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.
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 Directives.
The is first type of Angular 2 Directives. So as you know we have already learned about angular 2 components. If you don’t know angular 2 component, then click here to learn about angular 2 component.
This is second types of Angular 2 directives. Structural Directives are responsible for HTML layout. They alert the layout of the DOM by adding, replacing and removing DOM element.
Note: – In this tutorial, we will discuss Structural directives only.
This is the third type Angular 2 Directives. Attribute Directive changes the behavior or appearance of DOM element.
Note: – We will discuss Attribute Directive in next tutorial.
Let’s learn Structural Directive.
Structural Directives in Angular 2
As we know that structural directive is responsible for adding, replacing and removing DOM elements in DOM layout. Let’s create a simple example of Directives.
There are three built-in Structural Directives. *ngIf, *ngFor, *ngSwitch.
*ngIf : ngIf is the simplest structural directive. ngIf takes a Boolean expression and makes an entire DOM element appear or disappear.
*ngFor: It is a repeater directive of Angular 2. It is used to present a list of items.
*ngSwitch: It displays one element from among several possible elements based on condition. Angular puts only the selected element into the DOM.
Let’s understand Structural Directives using previous project.
Note: – I am not going to create a new project in this tutorial. I will use previous project that I have created in previous projects. If you don’t know how to setup Angular 2 in ASP.NET MVC 5 app or visual studio, then click here.
Step # 1 – Create a new folder
Go to solution explorer => right click on the app folder => choose Add => new Folder => then enter the name (E.g. Directive) => click ok button. It will create a new folder under the app folder with the name of “Directive”
Step # 2 – Create typescript file
In this step, we will add a new typescript file with the name of StructDirective.component.ts. StructDirective.component.ts) => then click ok button. It will create a new typescript file with the name StructDirective.component.ts. Copy the below code and put into StructDirective.component.ts file.
Step # 3 – Create a new html file.
In this step, we will add a new html file with the name of StructDirective.component.html. Go to solution explorer => right click on Directive folder => Add => choose html file => then enter name (E.g. StructDirective.component.html) => then click ok button. It will create a new html file under the Directive folder. Copy the below simple html code and put into StructDirective.component.html file.
Step # 4 – Update module.ts file.
In this step, we will update app.module.ts file. We need to make two changes in app.module.ts file. First, import StructComponent.component.ts file just below header.component file. Second, add StructDirective in declarations. See below code.
Step # 5 – Add Directive to Student.Component.html file.
As you know we have created <Struc-Directive> in StructDirective.Component.ts file. Now in this step we will add that directive “Struc-Directive” in Student.Component.ts file. So, go to solution explorer => app => Student folder => open Student.component.html file => then add this “Struc-Directive” just below the table tag.
Step # 6 – Run your project.
In this step just run your project (ctrl + f5). After run, you will see a below screenshot output in your browser.