Angular 8 ngIf Directive

ngIf Directive is the part of structural directives.The NgIf is the most straightforward structural Directive and comfortable to understand. The ngIf Directives is used to add and remove HTML elements according to the expression. The expression returns a Boolean value. If the appearance is false, then the removed, otherwise portion is inserted.

It is same as the ng-if Directive of AngularJS. The ngIf directive doesn't hide elements. It adds and removes them physically from the DOM. We can confirm it by using browser developer tools to inspect the DOM. When the condition is false, NgIf removes the host element from the DOM, which detection, and destroys it.

ngIf Syntax

  Condition is true and ngIf is true. 


 Condition is false and ngIf is false. 
 

The *ngIf directive form with an “else” block

Content to render when condition is true.

@Component({
 selector: ‘ng-if-simple’, 
 template: 
{{show ? ‘hide’: ‘show’}} 
 show= {[show}} 

 
Text to show
 `  
 })
 export class NgIfSimple { 
 show: boolean =true; 
 } 

@Component({
  selector :’ng-if-else’;
 template:
{{show ? ‘hide’ : ’show’}} 
 show={{show}} 

 
Text to show
 
Alternate text while primary 
text is hidden  
 ` 
 }]
 export class NgIfElse{
 show: boolean = true;
 }