Apprenez toutes les fonctionnalités disponibles dans ngIf, apprenez la meilleure façon de l'utiliser pour consommer des Observables, évitez un anti-modèle commun.
Dans cet article, nous allons couvrir toutes les fonctionnalités dont nous disposons pour utiliser la directive principale Angular ngIf.
Outre les fonctionnalités les plus couramment utilisées, nous allons apprendre à éviter un anti-pattern ngIf potentiel que nous pourrions rencontrer tout en développant des écrans d'interface utilisateur plus complexes qui consomment beaucoup de données observables provenant de différentes sources (backend, services observables, magasins , etc.).
Dans cet article, nous aborderons les sujets suivants :
- Qu'est-ce qu'Angular
ngIf? - Comment
ngIfse compare-t-il au masquage d'éléments à l'aide de CSS ? - Quel type d'expressions
ngIfpeut-il accepter ? - La syntaxe
ngIf else - La syntaxe
ngIf if then else - Consommer des données observables avec
ngIfet leasync pipe - Un potential anti-pattern potentiel lors de la consommation de données observables avec
ngIf - Le modèle Single Data Observable
- Comment
ngIffonctionne-t-il sous le capot ? - Résumé
Cet article est la traduction la série en cours sur les fonctionnalités d'Angular Core, vous pouvez trouver tous les articles disponibles ici.
Alors sans plus tarder, commençons à apprendre tout ce que nous devons savoir sur Angular ngIf !
Même si HTML est aussi un langage de programmation à part entière, il n'a pas d'instruction if, contrairement par exemple à Javascript.
La directive Angular ngIf fonctionne essentiellement comme une instruction if pour HTML, ajoutant cette fonctionnalité manquante au langage sous la forme de l'attribut spécial ngIf.
La directive Angular ngIf fonctionne essentiellement comme une instruction if pour HTML, ajoutant cette fonctionnalité manquante au langage sous la forme de l'attribut spécial ngIf.
Nous devons passer une condition à ngIf, pour que cela fonctionne. Voici quelques exemples:
Dans cet exemple, le container div ne sera affiché que si la variable nom est défini , sinon tout le contenu du div ne sera pas visible.
Dans le cas des éléments container, s'il n'y a pas de container disponible pour la section que nous voulons afficher ou masquer, nous n'avons pas besoin de créer un container div juste pour pouvoir appliquer ngIf.
Au lieu de cela, nous pouvons appliquer ngIf au-dessus de la directive ng-container. Cela affichera ou masquera le contenu de ng-container, sans avoir à créer un div supplémentaire juste pour cela :
Même si HTML n'a pas d'instruction if intégrée, il existe des moyens de masquer des parties de la page avec simplement du CSS, en utilisant la propriété display et
visibility.
Nous pouvons facilement ajouter ou supprimer ces attributs CSS à un élément HTML en utilisant Javascript et hide un élément de la page. Mais ce n'est pas la même chose que d'utiliser ngIf.
Avec ngIf, si un élément est caché, cet élément n'existe pas du tout dans la page.
Cela signifie que si vous inspectez la page à l'aide par exemple des outils de développement Chrome, vous ne trouverez aucun élément HTML présent dans le DOM.
Au lieu de cela, vous trouverez un commentaire HTML d'aspect étrange similaire à celui-ci, où la directive ngIf a été appliquée :
Ce commentaire est là uniquement à des fins de débogage, pour aider à identifier où l'élément manquant aurait dû être placé au cas où il était visible.
Ceci est très différent du comportement des propriétés CSS display ou de visibility. Par exemple, si nous définissons la propriété display sur la valeur none, l'élément HTML sera masqué.
Mais si on inspecte la page avec les Dev Tools, on verra que les éléments DOM sont toujours là présents sur la page, c'est juste qu'ils ne sont pas visibles :
Avec la propriété display CSS défini sur hiden, quelque chose de très similaire se produirait. L'élément HTML serait caché à l'utilisateur, mais toujours présent sur la page lors de l'inspection avec Dev Tools.
Avec une hidden visibility, l'élément occupera toujours un espace vide sur la page, même si l'élément est masqué. Ceci est différent de l'utilisation de display:none, où aucun espace sur la page n'est occupé.
Mais dans les deux cas, avec CSS, les éléments sont toujours présents dans le DOM, consommant des ressources aussi petites soient-elles, contrairement à ngIf où les éléments cachés n'existent tout simplement pas.
En général, lors de la création d'applications angulaires, nous devrions toujours préférer masquer les éléments à l'aide de
ngIfau lieu d'utiliser du CSS simple.
La directive ngIf peut prendre en entrée n'importe quelle expression Typescript valide et pas seulement un booléen. La véracité de l'expression va ensuite être évaluée, pour déterminer si l'élément doit être affiché ou non.
Outre les booléens, nous pouvons également transmettre à ngIf par exemple des chaînes, des tableaux, des objets, etc. Voici quelques exemples de ce qui se passerait si nous passions d'autres types primitifs à ngIf :
Et voici d'autres exemples de transmission de tableaux et d'objets à ngIf :
Si nous pouvions utiliser une syntaxe if en HTML, nous aurons également besoin d'une clause else, tout comme en Javascript, nous avons l'instruction if-else.
Dans Angular, nous pouvons utiliser la syntaxe ngIf else, de la manière suivante :
