Cette page passera en revue l'exemple Angular NgIf. NgIf est une directive utilisée pour ajouter une sous-arborescence d'éléments au DOM sur la base de la valeur vraie d'une expression. Si la valeur de expression est false, le sous-arbre d'éléments sera supprimé du DOM. Pour utiliser NgIf, nous devons le préfixer avec un astérisque (*) comme *ngIf. Masquer et afficher le sous-arbre d'éléments à l'aide de la propriété de visibilité CSS n'est pas le même que le travail effectué par NgIf. La propriété de visibilité CSS ne supprime pas le sous-arbre d'éléments du DOM, tandis que NgIf supprime le sous-arbre d'éléments du DOM pour une valeur fausse de l'expression. La propriété de visibilité CSS ne supprime pas physiquement la sous-arborescence des éléments lors du masquage, elle continue donc à consommer des ressources et de la mémoire, ce qui affectera les performances. Dans le cas de NgIf, il supprime physiquement le sous-arbre d'éléments, de sorte qu'il ne consomme pas de ressources et de mémoire, ce qui se traduit par de meilleures performances. NgIf est utilisé avec des éléments HTML ainsi que des éléments de composant. NgIf est utilisé avec les éléments HTML comme suit.

NgIf

NgIf

person.component.ts

import {Component} from '@angular/core';
import {NumEnum} from './numEnum';
import {Employee} from './employee';
@Component({
    selector: 'person-app',
    templateUrl: './person.component.html', 
    styleUrls: ['./person.component.css']
})
export class PersonComponent {
    isValid = true;
    ids = [1,2,3,4];
    myNumEnum = NumEnum;
    emp1 = new Employee(100, 'Nilesh');
    emp2 : Employee;
} 

person.component.html

<b>NgIf with HTML Elements </b><br/>
<p *ngIf="isValid">
Data is valid.
</p>
<p *ngIf="!isValid">
Data is not valid.
</p>

<div *ngFor="let id of ids">
  Id is {{id}}
  <div *ngIf="id%2 == 0">
<div [ngClass]="'one'">Even Number</div>
  </div> 
  <div *ngIf="id%2 == 1">
<div [ngClass]="'two'">Odd Number</div>
  </div> 
</div>

<br/>

<div *ngIf="myNumEnum.TWO > 1">
 {{myNumEnum.TWO}} is greater than 1.
</div>
<div *ngIf="myNumEnum.THREE < 2">
 {{myNumEnum.TWO}} is less than 2.
</div>

<br/>

<div *ngIf="emp1">
  Id:{{emp1.id}} Name: {{emp1.name}}
</div>

<div *ngIf="emp2">
  Id:{{emp2.id}} Name: {{emp2.name}}
</div>

<br/><b>NgIf with Component Elements</b><br/>

<my-msg *ngIf="emp1" [pname] = "emp1.name"> </my-msg>

<my-msg ng-template="ngIf:emp1" [pname] = "emp1.name"> </my-msg>

<ng-template [ngIf]="emp1">
   <my-msg *ngIf="emp1" [pname] = "emp1.name"> </my-msg>
</ng-template> 

person.component.css

.one {
    color: green;
}
.two {
    color: red;
}