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

The Angular ngIf is a Structural Directive that allows us to completely add or remove DOM Elements based on some condition. In this Tutorial, let’s learn what ngIf is and how to use it in Angular. We will show you how to add or remove elements using an example. We will also look at the optional else & then clause using the ng-template.

ngIf Syntax

The syntax of ngIf is as follows.

We attach the ngIf directive to a DOM element ( p element in the above example). Since ngIf is a structural directive, we can add it to any element like div, p, h1, component selector, etc. Like all structural directives, it is prefixed with * an 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 ngIf expression evaluates to false, then the Angular removes the entire element from the DOM. If true, it will insert the element into the DOM.

The following code uses ngIf to conditionally render a button based on a boolean variable showButton. The button is shown only when the showButton is true.

You can mimic the else condition shown here by using the Logical NOT (!).

The better solution is to use the optional else block, as shown in the subsequent section.

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 as true/false. The ngIf directive tries to coerce the value to Boolean.

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.

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

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

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 Angular renders both 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.