How to use ngIf, else, then in Angular By example

The ngIf is an Angular Structural Directive, which allows us to add/remove DOM Element based on some condition. In this Tutorial let us look at the syntax of ngIf. We will show you how to use ngIf using example code. We will also learn how to use the optional else clause & optional then clause using the ng-template

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

ngIf Syntax

ngIf

The ngIf is attached to a DOM element ( p element in the above example). ngIf is a structural directive, which means that you can add it to any element like div, p, h1, component selector, etc. Like all structural directive, it is prefixed with * asterisk

We bind the *ngIf to an expression (a condition in the above example). The expression is then evaluated by the ngIf directive. The expression must return either true or false.

If the expression evaluates to false then the Angular removes the entire element from the DOM. If true it will insert the element into the DOM.

Hidden attribute Vs ngIf

The above achieves the same thing, with one vital difference.

ngIf does not hide the DOM element. It removes the entire element along with its subtree from the DOM. It also removes the corresponding state freeing up the resources attached to the element.

hidden attribute does not remove the element from the DOM. But just hides it.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

The difference between [hidden]='false' and *ngIf='false' is that the first method simply hides the element. The second method with ngIf removes the element completely from the DOM.

By using the Logical NOT (!), you can mimic the else condition as shown here.

The better solution is to use the optional else block as shown in the next paragraph.

Condition

The condition can be anything. It can be a property of the component class. It can be a method in the component class. But it must evaluate to true/false. The ngIf directive tries to coerce the value to Boolean.

ngIf else

The ngIf allows us to define optional else block using the ng-template

The expression starts with a condition followed by a semicolon.

Next, we have else clause bound to a template named elseBlock. The template can be defined anywhere using the ng-template. Place it right after ngIf for readability.

When the condition evaluates to false, then the ng-template with the name #elseBlock is rendered by the ngIf Directive.

ngIf then else

You can also define then else block using the ng-template

Here, we have then clause followed by a template named thenBlock.

When the condition is true, the template thenBlock is rendered. If false, then the template elseBlock is rendered

ngIf Example

Create a new Angular project by running the command ng new ngIf

Component Class

Create a boolean variable showMe in your app.component.ts class as shown below

Template

Copy the following code to the app.component.html.

Now let us examine the code in detail

This is a simple checkbox bound to showMe variable in the component

The ngIf directive is attached to the div element. It is then bound to the expression “showMe”. The expression is evaluated and if it is true, then the div element is added to the DOM else it is removed from the DOM.

If else example.

If then else example. Note that the content of p element, to which ngIf is attached is never rendered

The property binding on the hidden attribute. You can open the developer console and see that both the Angular renders both the elements. But mark one of them as visible and the other one as hidden.

Module

Import FormsModule in app.module.ts as we are using ngModal directive

References

ngIf API

Summary

In this tutorial, we learned how to make use of ngIf directive to add/remove the DOM element. The ngIf can be used along with the optional then and else clause.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top