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';

@Component({
  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:

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

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:

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

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!
</div>

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

This will render a checkbox and a Click the checkbox above to read the secret message! text. When you click the checkbox, Hello Angular 9! will be rendered instead!

This is the example in Stackblitz

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

About the author

Ahmed Bouchefra is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

• Website
• Twitter
• LinkedIn
• GitHub