Angulaire 2 - Directives

UNE directiveest un élément HTML personnalisé utilisé pour étendre la puissance du HTML. Angular 2 a les directives suivantes qui sont appelées dans le cadre du module BrowserModule.

ngif
ngFor

Si vous affichez le fichier app.module.ts, vous verrez le code suivant et le module BrowserModule défini. En définissant ce module, vous aurez accès aux 2 directives.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Examinons maintenant chaque directive en détail.

ngIf

le ngif element est utilisé pour ajouter des éléments au code HTML s'il est évalué à true, sinon il n'ajoutera pas les éléments au code HTML.

Syntaxe

*ngIf = 'expression'

Si l'expression prend la valeur true, alors le correspondant est ajouté, sinon les éléments ne sont pas ajoutés.

Voyons maintenant un exemple de la façon dont nous pouvons utiliser la directive * ngif.

Step 1- Ajoutez d'abord une propriété à la classe nommée appStatus. Ce sera de type Boolean. Gardons cette valeur aussi vraie.

import { Component } from '@angular/core';  

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

Step 2 - Maintenant, dans le fichier app.component.html, ajoutez le code suivant.

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

Dans le code ci-dessus, nous avons maintenant la directive * ngIf. Dans la directive, nous évaluons la valeur de la propriété appStatus. La valeur de la propriété devant être évaluée à true, cela signifie que la balise div doit être affichée dans le navigateur.

Une fois que nous avons ajouté le code ci-dessus, nous obtiendrons la sortie suivante dans le navigateur.

Production

ngFor

le ngFor element est utilisé pour les éléments basés sur la condition de la boucle For.

Syntaxe

*ngFor = 'let variable of variablelist'

La variable est une variable temporaire pour afficher les valeurs dans le variablelist.

Jetons maintenant un œil à un exemple d'utilisation de la directive * ngFor.

Step 1- Ajoutez d'abord une propriété à la classe nommée appList. Ce sera du type qui peut être utilisé pour définir n'importe quel type de tableaux.

import { Component } from '@angular/core';
 
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

Par conséquent, nous définissons l'appList comme un tableau qui a 2 éléments. Chaque élément a 2 sous-propriétés comme ID et Nom.

Step 2 - Dans le app.component.html, définissez le code suivant.

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

Dans le code ci-dessus, nous utilisons maintenant la directive ngFor pour parcourir le tableau appList. Nous définissons ensuite une liste où chaque élément de la liste est le paramètre ID et nom du tableau.

Une fois que nous avons ajouté le code ci-dessus, nous obtiendrons la sortie suivante dans le navigateur.

Production