37. La directive NgIf

38. La directive NgFor

Conditionner un affichage

Parfois on a besoin d’afficher une portion de template seulement dans des circonstances spécifiques. On a besoin de tester une condition pour décider d’afficher un élément ou non.

La directive ngIf permet d’insérer ou de retirer un élément à partir d’une condition qui peut être vraie ou fausse.

Essayons d’afficher un message dans notre template, seulement si un utilisateur est majeur (s’il a plus de 18 ans). L’expression entre les doubles guillemets est explicite: l’utilisateur ne verra ce message que s’il a plus de 18 ans (ce qui implique qu’il y a une propriété utilisateur dans le composant associé à ce template). Selon le résultat de la condition, Angular ajoute le paragraphe au DOM et le message apparaît, ou le message n’est pas affiché.

Heu… ? Pourquoi nous n’avons pas utilisé l’interpolation ? Comment Angular sait que ‘utilisateur’ est lié à une propriété d’un composant ?

La réponse est simple : ngIf. Cette directive vous permet d’appeler les propriétés de vos composants directement, sans utiliser la syntaxe avec les doubles accolades, lors de la définition de votre condition.

Avez-vous remarqué * devant le ngIf ? Sachez qu’il s’agit d’une part essentielle de la syntaxe, et que vous ne devez pas l’oublier sous peine de lever une erreur !

Les directives NgIf et NgFor sont disponibles automatiquement dans tous les templates de notre application, car elles sont ajouté par le BrowserModule au démarrage de l’application. Nous n’avons donc pas besoin de les importer dans notre composant pour pouvoir les utiliser !

38. La directive NgFor

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s