Neu in Angular 4 - NgIf with else

Der traditionelle Ansatz

1
2
3
4
5
6


<p *ngIf="isAuthenticated">
    Logged in as
</p>
<p *ngIf="!isAuthenticated">
    Please login: <button>Login</button>
</p>

Der neue Ansatz mit else

1
2
3
4
5
6
7
8


<p *ngIf="isAuthenticated; else userNotLoggedIn">
    Logged in as
</p>
<ng-template #userNotLoggedIn>
    <p>
        Please login: <button>Login</button>
    </p>
</ng-template>

Der neue Ansatz mit if und else kombiniert

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<div *ngIf="isAuthenticated; then showUser else userNotLoggedIn"></div>
<ng-template #showUser>
    <p>
        Logged in as
    </p>
</ng-template>
<ng-template #userNotLoggedIn>
    <p>
        Please login: <button>Login</button>
    </p>
</ng-template>

Neu hat man somit nur eine logische if-condition mit beiden then or else Fällen.