Comment utiliser la directive angulaire intégrée: ngIf, ngFor, ngClass, etc.

Vous pouvez ajouter des directives au HTML dans votre projet Angular. Certains contrôlent la structure de votre balisage tandis que d'autres se concentrent sur les attributs.

Cet article passera en revue les six directives angulaires les plus courantes: ngFor, ngIf, ngClass, ngStyle, ngModel et ngSwitch.

Que sont les directives angulaires ?

Les directives angulaires vous permettent d'utiliser des instructions if et des boucles for, et d'ajouter d'autres comportements au code HTML d'un projet Angular.

Directif	La description
*ngIf	Vous pouvez utiliser ngIf lorsque vous souhaitez que certains blocs HTML ne s'affichent que s'ils remplissent une certaine condition. Par exemple, si vous aviez un formulaire avec une fenêtre contextuelle qui s'affiche après qu'un utilisateur a saisi une entrée pour un certain champ.
*ngPour	Vous pouvez utiliser ngFor si vous avez besoin qu'un certain bloc se répète plusieurs fois. Par exemple, si vous aviez une liste d'éléments et que vous deviez afficher une div pour chaque élément.
*ngClass	Cela ajoute un style conditionnel à l'aide d'une classe. Si une instruction if remplit la condition, elle appliquera la classe spécifiée.
*ngStyle	Cela ajoute un style en ligne conditionnel. Si une instruction if remplit la condition, elle appliquera les styles spécifiés.
*ngModèle	Cela vous permet de faire une liaison bidirectionnelle. Cela signifie que vous pouvez transmettre des données dans les deux sens entre le fichier HTML et TypeScript. Par exemple, vous pouvez transmettre la valeur d'un attribut du fichier TypeScript au fichier HTML, et vice versa.
*ngSwitch	Cela vous permet d'ajouter une instruction switch avec de nombreux cas pour vérifier de nombreuses valeurs. Selon les cas, certains éléments HTML s'afficheront.

Les directives structurelles impliquent la structure des éléments HTML. Ceux-ci incluent ngIf, ngFor et ngSwitch. Les directives d'attribut impliquent de modifier les propriétés des éléments HTML. Ceux-ci incluent ngStyle, ngClass et ngModel.

Comment utiliser ngIf

Pour utiliser ngIf, vous aurez besoin d'une condition à évaluer sur true pour qu'un élément HTML particulier s'affiche.

1. Ajoutez deux variables à votre fichier TypeScript. Dans cet exemple, il y a une variable noPlaylists et une variable pour stocker les listes de lecture. Cette variable sera évaluée à vrai si la longueur du tableau des listes de lecture est 0.

   noPlaylists: booléen = faux ;
   listes de lecture: n'importe lequel = [] ;
   constructeur() { }
    ngOnInit(): void {
    si (this.playlists.length 0) {
    this.noPlaylists = vrai;
    }
   }
   

2. Dans le HTML, ajoutez l'instruction *ngIf. Si noPlaylists est vrai, le message d'erreur contenu dans la plage ci-dessous apparaîtra. Sinon, ce ne sera pas le cas. Vous pouvez appliquer ngIf à différents types de Balises HTML.

   
   
   Il n'y a pas de listes de lecture disponibles.
   
   
   
   

3. Pour ajouter un composant "else" à l'instruction if, vous devrez ajouter le code HTML de la partie "else" dans un bloc de modèle.

   
   
   Il n'y a pas de listes de lecture disponibles.
   
   
   
   
   
   
   Listes de lecture trouvées.
   
   
   
   

Comment utiliser ngFor

Si vous devez répéter un certain nombre de blocs sur une page, vous pouvez utiliser la directive ngFor.

1. Dans le fichier TypeScript, ajoutez des éléments au tableau.

   listes de lecture: n'importe lequel = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporain", "numberOfSongs": 9},
    {"name": "Popular", "numberOfSongs": 14},
    {"name": "Acoustique", "numberOfSongs": 3},
    {"name": "Chansons de mariage", "numberOfSongs": 25},
    {"name": "Métal", "numberOfSongs": 0},
   ];
   

2. Dans le fichier HTML, ajoutez l'instruction *ngFor.

   Listes de lecture trouvées.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} chansons
   
   
   
   
   
   
   

   À l'intérieur du ngFor, vous pourrez référencer chaque objet du tableau à l'aide de la variable "playlist". "playlist.name" et "playlist.numberOfSongs" imprimeront les deux attributs dans le étiqueter.

Comment utiliser ngClass

Vous pouvez modifier la classe de style utilisée par une div particulière, en fonction d'une condition.

1. Ajoutez deux classes dans le fichier CSS avec des styles différents. Vous pouvez ajouter n'importe quel type de Style CSS que vous voulez, comme différentes couleurs d'arrière-plan.

   .Chansons {
    couleur de fond: #F7F5F2 ;
   }
   .noSongs {
    couleur de fond: #FFA8A8 ;
   }

2. Dans la boucle for de l'étape précédente, ajoutez la directive d'attribut ngClass. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" utilise la même opérateur ternaire que JavaScript et autres langues utilisées.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} chansons
   
   
   
   
   

   Si le nombre de chansons est supérieur à zéro, il appliquera la classe "chansons" à la div. Cela donnera à la div une couleur de fond grise. Sinon, si le nombre de chansons est zéro, il appliquera la classe "noSongs" à la div. Cela donnera à la div une couleur de fond rouge.

Comment utiliser ngStyle

Au lieu d'utiliser ngClass, vous pouvez utiliser ngStyle si vous souhaitez appliquer un style en ligne au lieu d'un style via une classe.

1. Modifiez le ngClass de l'étape précédente pour utiliser ngStyle à la place.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} chansons
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'couleur': playlist.numberOfSongs > 0? 'noir': 'bleu foncé' }"

PartagerPartagerTweeterPartagerE-mail

Rubriques connexes

• Programmation
• Programmation
• Javascript
• HTML
• CSS