Angular 9 Examples: Conditional Rendering With *ngIf & Else

Angular 9 Examples: Conditional Rendering With *ngIf & Else

In this post we will give you information about Angular 9 Examples: Conditional Rendering With *ngIf & Else. Hear we will give you detail about Angular 9 Examples: Conditional Rendering With *ngIf & ElseAnd how to use it also give you demo for it if it is necessary.

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


Hope this code and post will helped you for implement Angular 9 Examples: Conditional Rendering With *ngIf & Else. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US