Structural Directives In Angular 2 - Part Eleven

In my previous article, we learned about two way data binding in an Angular 2. I recommend you go through my previous articles for better understanding.

• Architecture Angular 2 Part: 1
• Getting Started with Angular 2 Part: 2
• Understanding Application Files in Angular 2 Part: 3
• Simple Hello world Application in Angular 2 Part: 4
• Creating our first component in Angular 2 Part: 5
• Style Components in Angular 2 Part: 6
• Date Binding in Angular 2 Part: 7
• Class & Style Binding in Angular 2 Part: 8
• Event Binding in Angular 2 Part:9
• Two way data binding in Angular 2 Part: 10

In this article, we are going to learn about Directives. There are three Directives in Angular2.

The first one is a component, which we are learning.

The second one is a Structural Directive, which we are going to learn about in this article.

The third one is Attribute Directives, which we are going to learn about in our next article.

Now, in this article, we are going to focus and learn about Structural Directives in Angular 2, which are responsible for DOM manipulation in Angular 2.

There are three built in Structural Directives, where the first one is ngif Directive.

Let us understand with an example, how ngif works.

In my class, I am going to create a new property called show element and assign it true, as shown below.

 

Code

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

In my template, we shall create a new paragraph tag, as shown below.

 

Code

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>
<p>Show Element</p>`
})

Now, Directives are going to live within the HTML tag, kind of custom attributes, as shown below.

 

Code 

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>
<p *ngIf="showElement>Show Element</p>`
})

It is ngif, which accepts Boolean value to make a piece of DOM appear or disappear, which is based on the ngif value.

Right now, our showElement is true, as shown below. Refresh the Browser to see the output.

 

It is the same, if I change show element from true to false and refresh the Browser.

 

We are not able to see show element text anymore.

 

Second, in Structural Directive, we are going to learn about ngswitch, which is just like switch cases used in programming languages to execute the code based on the condition. In an Angular 2, we use ngswitch to display height DOM elements, which are based on certain conditions.

To understand ngswitch, we shall create color property, as shown below.

  

export class RathrolaComponent {
    public title = "Tutorials from Rathrola";
    public showElement = false;
    public color = 'blue';
}

Now, in HTML, create a div and within that div tag, use ngswitch, as shown below.

 

Code   

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>
<p *ngIf="showElement">Show Element</p>
<div [ngSwitch]="color">
</div>`
})

Now, create a new paragraph tag. We use *ngswitch, which takes the value from the right hand side in the div tag.

Let us copy another paragraph tag with other colors, as shown below.

 

Code

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>
<p *ngIf="showElement">Show Element</p>
<div [ngSwitch]="color">
<p *ngSwitchWhen="'red'">Red Color is Shown</p>
<p *ngSwitchWhen="'blue'">Blue Color is Shown</p>
<p *ngSwitchDefault>Invalid Color is Shown</p>
</div>`
})

Now, we have a color property as Red.

In div tag, ngswitch = colour and the colour is replaced with Red. In the paragraphs, it is going to check what the color is.

Since it is Red, if you refresh the Browser, we will see a Red color shown text in the output, as shown below.

 

Change the color property to Blue and refresh the Browser and the output will be shown below.

 

Code

export class RathrolaComponent {
    public title = "Tutorials from Rathrola";
    public showElement = false;
    public color = 'blue';
}

Output

 

Finally, we have ngfor Directive, which is Repeated Directive. For example, we have a list of colors, which needs to be displayed, followed by defining a block of HTML to display just a single color.  Angular is going to do its magic and repeat this HTML element for each of the items in the array.

Let us see some example. We created a colors array property, as shown below.

 

Code

export class RathrolaComponent {
    public title = "Tutorials from Rathrola";
    public showElement = false;
    public color = 'blue';
    public colors = ['red', 'blue', 'green'];
}

Now, let’s try to display these items in HTML, create ul & li tags, as shown below.

 

 

Code 

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>
<p *ngIf="showElement">Show Element</p>
<div [ngSwitch]="color">
<p *ngSwitchWhen="'red'">Red Color is Shown</p>
<p *ngSwitchWhen="'blue'">Blue Color is Shown</p>
<p *ngSwitchDefault>Invalid Color is Shown</p>
</div>
<ul>
<li ></li>
</ul>
`
})

Usually we would have three li tags to display each of these colors but by using ngfor Directive, we have the syntax given below.

  

Code 

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>
<p *ngIf="showElement">Show Element</p>
<div [ngSwitch]="color">
<p *ngSwitchWhen="'red'">Red Color is Shown</p>
<p *ngSwitchWhen="'blue'">Blue Color is Shown</p>
<p *ngSwitchDefault>Invalid Color is Shown</p>
</div>
<ul>
<li *ngFor="let color of colors">{{color}}</li>
</ul>`
})

Now, go and refresh the Browser to see the output.

 

For each item in colors array, we are going to iterate and each time we are iterating; we are assigning it to a color. The first iteration is going to be Red, followed by Blue and subsequently Green.

We are going to use interpolation to actually output the value to our view.

It is ngfor Directive, which is a Repeated Directive. It is going to iterate through the elements of the list and then we can perform some operations based on each item in the list.

Thus, these are three main built in Directives in an Angular 2. In our next article, we are going to learn about Attribute Directive.

Thanks for reading my article.