CODEWITHSUNDEEP
expressangularconditional-statements
Raimens
Raimens

Reputation: 141

Conditional (if, else) in Angular 2

I worked a few years in .NET, Silverlight now I'm starting with Angular 2 and Expressjs. And I have a doubt that even I could not find how can I do this in angular 2 + Expressjs, and is safe from client side?

<% if(User.Identity.IsAuthenticated){ %>
     <b>Sign Out</b>
<% } else { %>
     <b>Sign In</b>
<% } %>

Upvotes: 11

Views: 17838

Answers (2)

Stephen Paul
Stephen Paul

Reputation: 39025

With Angular 4, this is now possible:

  • SYNCHRONOUSLY

    lets assume that we've defined this class variable:

    shown: boolean = true;

    If else syntax:

    <button (click)="shown = !shown">toggle 'shown' variable</button>
<div *ngIf="shown; else elseBlock">If shown</div>
<ng-template #elseBlock>else not shown</ng-template>

    Note that ng-template must be used in order for this structural directive to work, so if you have a custom component, wrap it inside ng-template. Below is an alternative syntax which also binds to the same class variable.

    If then else syntax:

    <button (click)="shown = !shown">toggle 'shown' variable</button>
<div *ngIf="shown; then primaryBlock; else secondaryBlock"></div>
<ng-template #primaryBlock>If shown</ng-template>
<ng-template #secondaryBlock>else not shown</ng-template>

  • ASYNCHRONOUSLY

    class:

    userObservable = new Subject<{first: string, last: string}>();
onButtonClick() {
  this.userObservable.next({first: 'John', last: 'Smith'});
}

    template:

    <button (click)="onButtonClick()">Display User</button>
<div *ngIf="userObservable | async as user; else loading">
  Hello {{user.last}}, {{user.first}}!
</div>
<ng-template #loading>Waiting for click...</ng-template>

Upvotes: 8

Sierrodc
Sierrodc

Reputation: 887

If you need the "else", perhaps the best way is to use NgSwitch (https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html)

So something like:

<div [ngSwitch]="User?.Identity?.IsAuthenticated">
  <b *ngSwitchCase="true">Sign Out</b>
  <b *ngSwitchDefault>Sign In</b>
</div>

Upvotes: 13

Related Questions