Concept de ngIf dans Angular 2

1. Masquer les composants dans CSS contre ngIf dans Angular 2
2. Expressions en ngIf dans Angular 2
3. Étapes pour utiliser ngIf dans Angular 2

Dans Angular 2, la directive ngIf est l’une des directives les plus simples et les plus utiles d’Angular 2. Elle est utilisée pour afficher ou masquer conditionnellement des éléments HTML en fonction de l’évaluation d’une expression.

La directive ngIf évalue une expression, et si elle est vraie, elle affichera un élément donné. Sinon, il ne rendra pas du tout cet élément.

Cette directive permet de réduire le nombre d’éléments DOM lorsque plusieurs vues partagent des caractéristiques communes.

Cet article vous apprendra tout sur ngIf.

Masquer les composants dans CSS contre ngIf dans Angular 2

Même si HTML n’a pas d’instruction if, les attributs d’affichage et de visibilité dans CSS peuvent être utilisés pour masquer des sections de la page.

Nous pouvons ajouter ou supprimer des propriétés CSS d’un élément HTML et masquer un élément de la page à l’aide de JavaScript. Cependant, ce n’est pas la même chose que ngIf.

Si un élément est masqué dans ngIf, il n’existe pas sur la page.

Si vous utilisez Chrome Dev Tools pour examiner la page, vous ne verrez aucun élément HTML dans le DOM.

Expressions en ngIf dans Angular 2

La directive ngIf accepte toute phrase Typescript valide en entrée, pas seulement un booléen. La rigueur de l’expression sera ensuite évaluée pour déterminer si l’élément doit être affiché ou non.

Nous pouvons également envoyer des textes, des tableaux et des objets à ngIf en plus des booléens.

Étapes pour utiliser ngIf dans Angular 2

Les étapes suivantes sont à suivre pour utiliser ngIf dans Angular 2 :

Exemple:

Discutons d’un exemple complet de ng-if en angular 2.

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: 
    `<h1 *ngIf=" 34< 100" >I'm Adil</h1> 
    <h1 *ngIf="3>1" > I'm John</h1>
    <h1 *ngIf="46<200" >I'm Steven</h1>`,
})
export class AppComponent  {
 }

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.