J'utilise Angular et je veux utiliser *ngIf else
(disponible depuis la version 4) dans cet exemple :
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
Comment puis-je obtenir le même comportement avec ngIf else
?
Angular 4 et 5 :
utilisation de else
:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
vous pouvez aussi utiliser then else
:
<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>
ou then
seul :
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Démo :
[Plunker][1]
Détails:
<ng-template>
: est la propre implémentation d'Angular de la balise <template>
qui est conforme à [MDN][2] :
L'élément HTML
<template>
est un mécanisme permettant de contenir du contenu côté client qui n'est pas destiné à être utilisé dans le cadre d'un projet. client qui ne doit pas être rendu lorsqu'une page est chargée mais qui peut être être ultérieurement instancié pendant l'exécution en utilisant JavaScript. [1] : https://plnkr.co/edit/XD5vLvmwTApcaHJ66Is1 [2] : https://developer.mozilla.org/en/docs/Web/HTML/Element/template
"bindEmail" ; il vérifiera si l'email est disponible ou non. Si l'email existe, la déconnexion sera affichée, sinon la connexion sera affichée.
<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>
Dans Angular 4.0, la syntaxe "if..else" est assez similaire aux opérateurs conditionnels de Java.
En Java, vous utilisez "condition?stmnt1:stmnt2"
.
En Angular 4.0, vous utilisez *ngIf="condition;then stmnt1 else stmnt2"
.