Angular 9 Examples: Conditional Rendering With *ngIf & Else

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']})exportclassAppComponent{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 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 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