Directives In Angular 5 - Part Two (Structural Directives)

What are Structural Directives?

Structural directives are responsible for the HTML layout. They shape or reshape the HTML view by simply adding or removing the elements in the DOM. These directives are the way to handle how the component or the element renders in a template.

• Angular directives - part One 

There are basically 3 structural directives available in Angular.

1. NgIf (*ngIf )
2. NgFor (*ngFor)
3. NgSwitch (*ngSwitch)

Structural directives are always preceded with the * directive attribute name so as to make them easy to recognize.

Let’s see one by one how they work.

NgIf ( *ngIf)

This directive conditionally adds or removes the content from the DOM based on whether an expression is true or not.

Let's see the snippet for the component.

import {
    Component,
    OnInit
} from '@angular/core';
@Component({
    selector: 'app-appngif',
    templateUrl: './appngif.component.html',
    styleUrls: ['./appngif.component.css']
})
export class AppngifComponent implements OnInit {
    showdiv = false;
    togglevisibilty(): void {
        this.showdiv = !this.showdiv;
    }
    constructor() {}
    ngOnInit() {}
}

In the above case, we have one property called showdiv which is Boolean property and we have one function called togglevisibility which reverses the value of the showdiv property.

Template for the same can be modified like below and can be seen as in the following code.

<input type="button" on-click='togglevisibilty()' value="Show Hide Button">
<div *ngIf='showdiv'> This is Sample text</div> {{showdiv==true?sampletext:"mangesh"}}

We bind the function toggleVisibility() on the click of a button. When a click happens, it will call the function in the component and will revert the current value of the variable .

When we look at the *ngIf directive, it is assigned with the value of the showDiv and depending on that, the div will be visible.

NgFor (*ngFor)

This is the directive which makes it easy to iterate over the collection like an object or an array and create a template for each of them. Let’s check the snippet for the basic ngFor that we have done below.

Let's check the component snippet to see how it gives us the data.

import {
    Component,
    OnInit
} from '@angular/core';
@Component({
    selector: 'app-ng-for-directives',
    templateUrl: './ng-for-directives.component.html',
    styleUrls: ['./ng-for-directives.component.css']
})
export class NgForDirectivesComponent implements OnInit {
    cricketers = [{
        name: 'Saurav Ganguly',
        BattingStyle: 'Left Handed batsman',
        ODI: "21",
        Test: "17"
    }, {
        name: 'Sachin Tendulkar',
        BattingStyle: 'Right Handed batsman',
        ODI: "49",
        Test: "51"
    }, {
        name: 'Rahul Dravid',
        BattingStyle: 'Right Handed batsman',
        ODI: "12",
        Test: "34"
    }, {
        name: 'Sehwag',
        BattingStyle: 'Right Handed batsman',
        ODI: "15",
        Test: "15"
    }, {
        name: 'Kohali',
        BattingStyle: 'Right Handed batsman',
        ODI: "34",
        Test: "20"
    }, {
        name: 'Rohit sharma',
        BattingStyle: 'Right Handed batsman',
        ODI: "21",
        Test: "17"
    }, ];
    constructor() {}
    ngOnInit() {}
}

Above is the simple collection of the cricketers data and we want to show them one by one on the screen. For this, we need to change the template into something like this.

<table border="1">
    <tr>
        <th>Player Name</th>
        <th>Batting style</th>
        <th>ODI Hundreds</th>
        <th>Test Hundreds</th>
    </tr>
    <tr *ngFor='let c of cricketers'>
        <td>{{c.name}}</td>
        <td>{{c.BattingStyle}}</td>
        <td>{{c.ODI}}</td>
        <td>{{c.Test}}</td>
    </tr>
</table>

When we see the output, it will be like the below image. So far, we are able to show the data from the collection on the screen.



Let’s analyze the syntax of the *ngfor which is used in the above code. In that, it can be explained in the 3 sections -

1. let c :: it creates the local variable c which will be available in the template.
2. of cricketers :: it is the collection of the cricketers which will be iterated and which should be made available in the component.
3. * :: it creates the parent template for the same.

Let’s see some variants of the ngFor which are provided by Angular using various local variables, such as - index, last, first, odd, even. When we see the variable, index will return the index of the collection while other values give us the Boolean indicating the value of the property.

Code snippet for this demo is given below.

<table border="0">
    <tr>
        <th>Sr.No</th>
        <th>Player Name</th>
        <th>Batting style</th>
        <th>ODI Hundreds</th>
        <th>Test Hundreds</th>
    </tr>
    <tr *ngFor='let c of cricketers let i = index let even=even,let odd=odd let first=first,let last=last' [ngClass]={first:first,odd:odd,even:even,last:last}>
        <td>{{i+1}}</td>
        <td>{{c.name}}</td>
        <td>{{c.BattingStyle}}</td>
        <td>{{c.ODI}}</td>
        <td>{{c.Test}}</td>
    </tr>
</table>

And the Styles that we have applied here can be found here in the css file of the component which has the following classes.

.odd {
    background - color: rgba(0, 0, 255, 0.199);
    text - align: center;
    font - family: 'Times New Roman', Times, serif
}
.even
{
    background - color: #0066ff;
    text-align: center;
    ;font-family:cursive

}
.first{
    background-color: # 6 b8dc0;
    text - align: center;
    font - family: 'Times New Roman', Times, serif
}.last {
    background - color: #ebd2d2;
    text - align: center;
    font - family: 'Times New Roman', Times, serif;
    font - size: 15 px;
}

It will give us the output like this.



Here, we can see the output changes as per the classes applied depending on the variable.

ngSwitch(*NgSwitch)

NgSwitch is a directive which is bound to an expression. It is used to display the element tree based on the set of many elements. It has basic elements like below,

1. ngSwitch
   we bind an expression to it
   
   
2. ngSwitchCase
   it defines an element with the matched value we need to provide the * before it.
   
   
3. ngSwitchDefault
   This is the default case which will be executed if no match happened.

Let's see how it works for the example.

import {
    Component,
    OnInit
} from '@angular/core';
@Component({
    selector: 'app-ngswitch',
    templateUrl: './ngswitch.component.html',
    styleUrls: ['./ngswitch.component.css']
})
export class NgswitchComponent implements OnInit {
    Playerselection = ''
    constructor() {}
    ngOnInit() {}
    checkChangedValue(changedvalue) {
        this.Playerselection = changedvalue;
    }
}

This is the component which has a method with one property, playerselction, which holds the value. Next is the checkchangedvalue() which will be called when the drop-down is changed and then assigns the value to the variable.

Let's see the template of the component.

<select (change)='checkChangedValue($event.target.value)'>
<option value="none" selected>Select</option>
<option value="SG">Sourav</option>
<option value="ST">Sachin</option>
<option value="RD">Rahul</option>

</select>
<div [ngSwitch]="playerselection">
    <p *ngSwitchCase="'SG'">Sourav selected</p>
    <p *ngSwitchCase="'ST'">Sachin selected</p>
    <p *ngSwitchCase="'RD'">Rahul selected</p>
    <p *ngSwitchDefault>NO player selected</p>
</div>

Here, we have the option value set and playerselection property in the component used as the expression to bind to the ngswitch. Whenever the change in the value occurs, it sends the value to the event in the component which apparently changes the value in the expression and the paragraphs are displayed accordingly.

This was all about the structural directives in the Angular 5. The first part of the article can be found at this Angular directives part 1

References

1. https://angular.io/
2. https://blog.angular-university.io/angular-2-ngfor/