Add/Remove HTML Elements Using Structural Directives

Introduction

Let us start working with structural directives that let us work on HTML elements by adding/removing its element dynamically. Sometimes, we want a particular set of elements to be visible or render based on some condition and also, we want it to render multiple times in the DOM.

So, the structural directives by Angular provide us with the facility to work with these scenarios. The three common directives are -

1. ngIf
2. ngSwitch
3. ngFor

Prerequisites

• HTML, CSS, and JS
• Basics of TypeScript
• Components

Let us create a sample TestApp. For this, you should have installed the below for the development environment.

1. Node
2. Npm (comes when you install node)
3. Angular CLI
4. Text Editor.

For creating a new application, run the below command on any of your locations.

> ng new TestApp

Create a new component.

> ng g c test

Once your command is completed, you will have a TestApp folder created inside your sample folder.

Now, you will have your project folder called 'TestApp' and your component ‘test’.

Note
See my previous article “Getting started with Angular CLI” if you want to learn the installation and introduction from the basics and start with the execution of the sample application.

ngIf directive

This directive is used to render the particular set of HTML elements on the basis of the condition.

Open test.component.html and add the below content.

<h2>ngIf directive demo!</h2>
<p *ngIf="true">element - Under *ngIf directive condition.</p>

Again, modify the contents as below.

<h2>ngIf directive demo!</h2>
<p *ngIf="false">element - Under *ngIf directive condition.</p>

Depending on the ngIf condition the element has been rendered above.

We can also perform the class business logic to define the condition for which the element will be rendered accordingly.

Open test.component.ts and add below contents,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  public show = true;
  constructor() { }
  ngOnInit() {
  }
}

Open test.component.html and add the below contents,

<h2>ngIf directive demo!</h2>
<p *ngIf="show">element - Under *ngIf directive condition.</p>

Run the application,

 

Open test.component.ts and add change the value to false,

public show = false;

Save and run the application.

 

Else block in *ngIf statement

We can create the Else block that will render when the certain if condition will be true. Let us try with a simple example.

Open test.component.htm and add the below content,

<h2>ngIf directive demo!</h2>
<p *ngIf="show; else elseStatement">element - Under *ngIf directive condition.</p>

<ng-template #elseStatement>
    <p>
        Element - Under Else block.
    </p>
</ng-template>

Value of show=false;

Run the application,

 

Ng-template

Ng-template in Angular is used to define the block of the elements that we can use somewhere in HTML. Like above, we have utilized this block in else condition of ngIf.

Let us use the block of the statement in both the conditions instead of using inline statements.

Open test.component.html and add the below contents.

<h2>ngIf directive demo!</h2>
<p *ngIf="show; then thenStatement; else elseStatement">element - Under *ngIf directive condition.</p>

<ng-template #thenStatement>
    <p>
        Element - Under true/if condition.
    </p>
</ng-template>

<ng-template #elseStatement>
    <p>
        Element - Under false/else condition.
    </p>
</ng-template>

Open test.component.ts and change the value of show=true;

Run the application.

 

Open test.component.ts and change the value of show=false;

Run the application.

 

ngSwitch

ngSwitch in Angular is similar to other programming switch statements. The only difference is that here we are only rendering the HTML on the basis of the switch statement. It is used when we have multiple sets of value to perform the rendering of a particular HTML statement.

Open test.component.html and add below content.

<h2>ngIf directive demo!</h2>
<div [ngSwitch]="position">
    <div *ngSwitchCase="'first'">welcome - you are first.</div>
    <div *ngSwitchCase="'second'">welcome - you are second.</div>
    <div *ngSwitchCase="'third'">welcome - you are third.</div>
    <div *ngSwitchCase="'fourth'">welcome - you are fourth.</div>
</div>

Open test.component.ts and add property ‘position’,

public position = “second”

Run the application.

 

ngFor directive

The ngFor directive is used in Agular to render the set of elements. It is like the For loop of other programming languages but here it is rendering a list of elements.

Let us take an array of elements and render it through ngFor directives in HTML.

Open test.component.html and add the below contents.

<h2>ngFor directive demo!</h2>
<div *ngFor="let subject of subjects">
    <h3>{{subject}}</h3>
</div>

Open test.component.ts and add the ‘subjects’ array property.

public subjects = ["English", "Maths", "Science", "Computer", "Art"];

Run the application.

 

You can add the array of objects and render its values in the form of a grid and so on.