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']
})
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.
You can reach the author via Twitter:
Follow @ahmedbouchefraAbout the author


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.
Online Courses (Affiliate)
If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)
![]()
Angular Crash Course for Busy Developers
![]()
Read our other tutorials
- Angular Tutorial
- Laravel 6 Tutorial
- React Tutorial
- React Hooks Tutorial
- React Native Tutorial
- Webpack Tutorial
- PHP Tutorial
- JavaScript Tutorial
- Django Tutorial
- Java Spring Tutorial
- Rails 6 Tutorial
- Ionic 4 Tutorial
- TypeScript Tutorial
- Bootstrap 4 Tutorial
- Electron Tutorial
- Cordova Tutorial
- HTML Tutorial
- GraphQL Tutorial
- CSS Grid Layout Tutorial
- PWA Tutorial
