"Struggling with dynamically displaying div contents" Situation:- I have a list of 3 items: *Menu1 *Menu2 *Menu3 and I have separate div contents for each of these menu items.
Requirement :- By default, Menu1 should be displayed. When Menu2 is clicked, the content of Menu1 and Menu3 should be hidden, and Menu2 content should be displayed.
How can I achieve this in Angular 2?
Here is my sample code and plunker:
home.component.html
<div class="item-list>
<div><li (click)="Menu2==false && Menu3==false;">Menu1</li></div>
<div><li (click)="Menu1==false && Menu3==false;">Menu2</li></iv>
<div><li (click)="Menu2==false && Menu1==false;">Menu3</li></div>
<div>
<div class="information">
<div *ngIf="Menu1==true && Menu2==false && Menu3==false ">Menu1 contents goes here</div>
<div *ngIf="Menu2==true && Menu1==false && Menu3==false ">Menu2 contents goes here</div>
<div *ngIf="Menu3==true && Menu2==false && Menu1==false ">Menu3 contents goes here</div>
</div>
home.ts
export class HomePage {
private Menu1:boolean=true;
private Menu2:boolean=false;
private Menu3:boolean=false;
}