The traditional approach
<p *ngIf="isAuthenticated">
Logged in as
</p>
<p *ngIf="!isAuthenticated">
Please login: <button>Login</button>
</p>
The new approach with else
<p *ngIf="isAuthenticated; else userNotLoggedIn">
Logged in as
</p>
<ng-template #userNotLoggedIn>
<p>
Please login: <button>Login</button>
</p>
</ng-template>
The new approach combined with if and else
<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>
Now you only have one logical if-condition with both then or else cases.
This text was automatically translated with our golang markdown translator.
