Neu in Angular 4 - NgIf with else

13.05.2017 Tom Trapp
Mobile Tech Angluar Hands-on

Der traditionelle Ansatz

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

Der neue Ansatz mit else

<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

<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.

Tom Trapp – Problemlöser, Innovator, Sportler. Am liebsten feilt Tom den ganzen Tag an der moderner Software und legt viel Wert auf objektiv sauberen, leanen Code.