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.
<div *ngIf=”condition:else elseblock”>.....</div>
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.
<div *ngIf=”condition; then thenBlock else elseBlock”></div>
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.