What is NgIf, else and then in angular

In this post, I am going to explain all conditional statement of Angular like NgIf, NgIf else, Then and Switch Statement.

NgIf, else, Then

NgIf conditionally includes a template based on the value of expressions
It adds or removes the HTML element in DOM layout.
The basic syntax of the ngif directives is simple and effective, all we need to do is prefix the directive name with an asterisk ( * ) and add it anywhere inside our template.


NgIf is an structural directive that can add or remove host element and its descendants in DOM layout at run time. It conditionally shows the inline template.
NgIf works on the basis of true and false result of given expression. If condition is true, the elements will be added into DOM layouts otherwise they will be removed



*ngIf with else

Else is used when we want to display something for false condition.
The else block is used as follows.

2) for else block we need to use element. It is referred by a template reference variable. NgIf will use that template reference variable to display else block when condition is false.

*ngIf with Then and Else

NgIf with then and else is used as follow.


When condition is true, then the with reference variable thenBlock is executed and when condition is false then the with reference variable else block executed. The value of thenBlock and elseBlock can be changed at run time.

We can have more than one tag for then and else block and at run time we can switch to those by changing the value of thenBlock and elseBlock. At one time only one for then block or elseBlock will run.



Leave a Comment