Conditional Rendering in Angular 9 using *ngIf directive

In this example, we’ll see how to conditionally render a component or HTML element in Angular 9 using the *ngIf directive.

What’s conditional rendering?

Conditional rendering means elements are inserted into the DOM only when a condition is meet.

Angular provides the *ngIf directive which allows you to render elements conditionally in your Angular templates.

Let’s see this with a simple example.

Open the src/app/app.component.ts file in your project define a new class variable called displayElement and gives it an initial value of false:

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

export class AppComponent {
  displayElement = false;

Next, open the src/app/app.component.html file and update it as follows:

    <p *ngIf="displayElement">Magic element!</p>

In this case, the <p> element and its contents will not be rendered in the DOM because we applied the *ngIf directive with a false value

If you go back to your component’s class and assign a true value to the displayElement variable the element will be rendered.

The Else block

Just like typical programming languages the *ngIf directive can have an else block which is shown if the statement defined in the main block is false.

Go back to the src/app/app.component.html file and update it as follows:

    <!-- notActive is a reference to else -->
    <p *ngIf="displayElement; else showThis">Magic element!</p>
    <ng-template #showThis>      
        Another magic element!

Here, we used the else showThis with the *ngIf directive to provide a partial template that will be rendered instead if the <p> element.

The else block has to be an ng-template.

The Angular template is referenced using a template reference that we’ve called showThis.

Another example

Open the src/app/app.component.html file and replace the contents with the following code:

<input [(ngModel)]="showContent" type="checkbox"/> Show My Secret Message

<hr />

<div *ngIf="showContent; else message">
  Hello Angular 9!

<ng-template #message>
  Click the checkbox above to read the secret message!

#Angular #html #webdev

Conditional Rendering in Angular 9 using *ngIf directive
38.45 GEEK