Ik'gebruik Angular en ik wil *ngIf else
gebruiken (beschikbaar sinds versie 4) in dit voorbeeld:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
Hoe kan ik hetzelfde gedrag bereiken met ngIf else
?
Angular 4 en 5:
gebruik else
:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
u kunt ook then else
gebruiken:
<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>
of alleen then
:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo :
[Plunker][1]
Details:
<ng-template>
: is Angular's eigen implementatie van de <template>
tag die volgens [MDN][2] :
Het HTML
<template>
element is een mechanisme voor het vasthouden van client-side inhoud vast te houden die niet moet worden gerenderd als een pagina wordt geladen, maar die vervolgens tijdens runtime kan worden geïnstantieerd met behulp van JavaScript.
"bindEmail" het zal controleren of e-mail beschikbaar is of niet. als e-mail bestaat dan zal Logout tonen anders zal Login tonen
<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>
In Angular 4.0 lijkt de if..else
syntaxis veel op de voorwaardelijke operatoren in Java.
In Java gebruik je "condition?stmnt1:stmnt2"
.
In Angular 4.0 gebruik je *ngIf="condition;then stmnt1 else stmnt2"
.