Angular 2 Structural directives

What are structural directives?

Structural directives are used for changes the DOM layout by adding and removing DOM elements. like ngFor. ngFor structural directive adds or removes elements to the DOM depending on how many elements are there in the given array.

Let's see how to use Structural directives in an Angular 2 application.

How to use built-in Structural directives?

There are some most commonly used built-in Structural directives like ngFor, ngIf etc. Let's see how to use ngFor Structural directive.

The ngFor directive is a repeater directive, it adds/removes elements in our DOM depending on how many elements are in the given array. So for using this ngFor directive, we must have an array list first.

In the "Angular 2 Component" tutorial, We had created an EmployeeList component for showing list of employees. See here in the template of the EmployeeList Component.

<h2>Employee List</h2>
<search-bar [PlaceHolderText]="'Search employee...'"
    (Search)="OnEmployeeSearch($event)"></search-bar>
<table class="table table-responsive table-bordered table-striped" myVisibility>
    <thead>
     <tr>    
         <th>Employee ID</th>
         <th>Employee Name</th>
         <th>Contact No</th>
         <th>Designation</th>
     </tr>
    </thead>
    <tbody>
        <tr 
        [class.special] = "item.EmployeeID == 1"
        [style.color] = "item.EmployeeID == 1? 'white':'black'"
        *ngFor="let item of EmployeeList;">  
            <td>{{item.EmployeeID}}</td>
            <td>{{item.FirstName}} {{item.LastName}}</td>
            <td>{{item.ContactNo}}</td>
            <td>{{item.Designation}}</td>
        </tr>
    </tbody>
</table>

See here in line 15, we have used *ngFor directive. Here * indicates that it's a structural directive. This is the syntax for using ngFor directive.

What it is doing here? It's adding one tr element in our DOM for each item of the array EmployeeList. And whenever we will add or remove any item in the array, a new element will be added or removed from our DOM.

Let's see what happen when we will add a new item in the EmployeeList array.

I will write code for add a new employee in our EemployeeList array inside setTimeout method  So we can see is ngFor directive automatically add a new element in our DOM for the newly added item in the array or not.

import {Component, OnInit} from '@angular/core'
import {EmployeeModel} from '../Models/EmployeeModel'
@Component({
    selector:'employee-list',
    templateUrl:'employee-list.component.html',
    moduleId: module.id
})
export class EmployeeListComponent implements OnInit{
    public EmployeeList: Array<EmployeeModel> = [];
    public TotalPageNumber:number = 5;
    public LoadIntialData(filterText:string):void{
        this.EmployeeList = [{
            EmployeeID:1,
            FirstName: "Sourav",
            LastName:"Mondal",
            ContactNo: "1234567890",
            Designation:"Software Developer"
        },
        {
            EmployeeID:2,
            FirstName: "Rik",
            LastName:"Decosta",
            ContactNo: "1478523690",
            Designation:"Software Developer"
        },{
            EmployeeID:3,
            FirstName: "Jhon",
            LastName:"Decosta",
            ContactNo: "5874213690",
            Designation:"Software Developer"
        }];
 
        if(filterText !=""){
            var afterFilterEmpList: Array<EmployeeModel> = [];
            this.EmployeeList.forEach(item=>{
                if(item.FirstName.toLowerCase().includes(filterText) ||
                item.LastName.toLowerCase().includes(filterText))
                {
                    afterFilterEmpList.push(item);
                }
            })
            this.EmployeeList = afterFilterEmpList;
        }
    }
    ngOnInit(){
        this.LoadIntialData("");  
        setTimeout(()=> {
            this.EmployeeList.push({
                EmployeeID:4,
                FirstName: 'Riki',
                LastName:'Roy',
                ContactNo: '1245789632',
                Designation: 'HR'
            });
        }, 5000);
    }
    OnEmployeeSearch(searchText):void{
        this.LoadIntialData(searchText);            
    }    
}

Now if we run the application, you can see that a new element will be added in the table after 5 seconds.

The ngFor exports some other values also and those are...
index - return the current index of the iteration,
first - return a boolean value for identifying is the current item is the first item or not in the iteration,
last -  return a boolean value for identifying is the current item is the last item or not in the iteration,even - it also returns a boolean value for identifying is the current item is an even index,
and odd - it returns a boolean value for identifying is the current item is odd index.

We can use this values as per our needs. Like We can use the index value for showing serial no here in this table, what we do most of the time when we are showing a list of items on our web page right?

So let's see how we can do it here.

<h2>Employee List</h2>
<search-bar [PlaceHolderText]="'Search employee...'"
    (Search)="OnEmployeeSearch($event)"></search-bar>
<table class="table table-responsive table-bordered table-striped" myVisibility>
    <thead>
     <tr>    
         <th>Serial No</th>
         <th>Employee ID</th>
         <th>Employee Name</th>
         <th>Contact No</th>
         <th>Designation</th>
     </tr>
    </thead>
    <tbody>
        <tr 
        [class.special] = "item.EmployeeID == 1"
        [style.color] = "item.EmployeeID == 1? 'white':'black'"
        *ngFor="let item of EmployeeList;let i = index;let even=even; let odd=odd;"
        [ngClass]="{'even': even, 'odd' : odd}">  
            <td>{{i + 1}}</td>          
            <td>{{item.EmployeeID}}</td>
            <td>{{item.FirstName}} {{item.LastName}}</td>
            <td>{{item.ContactNo}}</td>
            <td>{{item.Designation}}</td>
        </tr>
    </tbody>
</table>

Now if we run the application, we can see the serial no column is there in the table showing serial no. Also if you see inspect element you can see odd/even class added on table row as per odd/even index item.

Create a custom structural directive in Angular 2

Till now we have learned about built-in structural directives and seen how to use. Let's create a custom structural directive now.
See this image, the pagination control. This is what we are going to create our custom structural directive for.

We do paging to prevent our pages from becoming too long and overwhelming. right?
When we do paging, we do have a value to knowing the total number of pages available. So we can generate the pagination control based on the total page number value.