controll more then 3 divs with *ngIf in Angular 2

Question

Is it possible to controll 3 divs using *ngIf in Angular 2?

Can I do something like

<div *ngIf="planState=plan1">show plan 1</div>

<div *ngIf="planState=plan2">show plan 2</div>

<div *ngIf="planState=plan3">show plan 3</div>

Thanks!

Answer 1

I have update your plunker code as below and it works:

@Component({
  selector: 'my-app',
  template: `
  <button (click)="OnButtonClick(1)">select - 1</button>
  <button (click)="OnButtonClick(2)">select - 2</button>
  <button (click)="OnButtonClick(3)">select - 3</button>
  <h5>You selected : {{value}}</h5>

  <hr>
  <div>
     <div *ngIf="value==1">1. Template - <b>{{value}}</b> </div>
     <div *ngIf="value==2">2. Template - <b>{{value}}</b> </div>
     <div *ngIf="value==3">3. Template - <b>{{value}}</b> </div>
     <div *ngIf="value==0">Default Template</div>

  </div>
  `,

})
export class AppComponent {
  value:number=0;

  OnButtonClick(value)
  {
    this.value=value
  }
}

Answer 2

You just miss comparison operator it should be == instead = only.

You can also use [hidden]. advisable to use ngIf prior to [hidden]

<div *ngIf="planState==plan1">show plan 1</div>

OR

<div [hidden]="planState!=plan1">show plan 1</div>

Answer 3

You can use *ngIf in angular 2 which is equivalent to ng-if of angular