Conditional Rendering in Angular 9 using *ngIf directive

Conditional Rendering in Angular 9 using *ngIf directive

In this Angular 9 tutorial, we'll see how to conditionally render a component or HTML element in Angular 9 using the *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';

@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>

Angular html webdev

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

Commonly Used HTML Tags with Examples

HTML tags are keywords used in HTML to display web-pages with certain properties. They are further used for defining HTML elements. An HTML element consists of a starting tag.

How to Build an HTML Table Dynamically with Angular 9 and ngFor

This Angular 9 tutorial explains how to build an HTML table dynamically with Angular 9 and the ngFor directive. How to create "tr" and '/tr' tags dynamically in Angular 9 using ngFor. Dynamically generate HTML table using Angular 9. Dynamically creating a HTML table with Angular 9. Traversing an HTML table with Angular 9

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc