Показать/скрыть несколько Divs angular2

Question

Я хочу использовать список Li, чтобы показать/скрыть несколько divs angular2.

На первой странице будут показаны все div. когда маленький экран я скрыть некоторые DIV в В маленьком экране, когда я нажимаю список 1, как показать конкретный Div

<li><i class="fa fa-location-arrow" aria-hidden="true" (click)="showDiv(1)"></i>Locator</li> 
<li><i class="fa fa-gift" aria-hidden="true" (click)="showDiv(2)"></i>Offer</li> 
<li><i class="fa fa-phone" aria-hidden="true" (click)="showDiv(3)"></i> Contact</li> 
<li><i class="fa fa-calendar" aria-hidden="true" (click)="showDiv(4)"></i>Holiday</li> 
<li><i class="fa fa-question-circle-o" aria-hidden="true" (click)="showDiv(4)"></i>FAQ</li> 

<div id="div1" *ngIf="windowWidth > 767">Lorum Ipsum</div> 
<div id="div2" *ngIf="windowWidth > 767">Lorum Ipsum</div> 
<div id="div3" *ngIf="windowWidth > 767">Lorum Ipsum</div> 
<div id="div4" *ngIf="windowWidth > 767">Lorum Ipsum</div> 

file.ts:

windowWidth: number = window.innerWidth; 

    //initial values, The window object may still be undefined during this hook, let me know if that's the case and we'll figure out a better hook for the initial value 
    ngAfterViewInit() { 
     this.windowWidth = window.innerWidth; 
    } 

    //if screen size changes it'll update 
    @HostListener('window:resize', ['$event']) 
    resize(event) { 
     this.windowWidth = window.innerWidth; 
    } 

Answer 1

class MyComponent { 
    selectedIndex = -1; 

    showDiv(index) { 
    this.selectedIndex = index; 
    } 
} 

<li><i class="fa fa-location-arrow" aria-hidden="true" (click)="showDiv(1)"></i>Locator</li> 
<li><i class="fa fa-gift" aria-hidden="true" (click)="showDiv(2)"></i>Offer</li> 
<li><i class="fa fa-phone" aria-hidden="true" (click)="showDiv(3)"></i> Contact</li> 
<li><i class="fa fa-calendar" aria-hidden="true" (click)="showDiv(4)"></i>Holiday</li> 
<li><i class="fa fa-question-circle-o" aria-hidden="true" (click)="showDiv(4)"></i>FAQ</li> 

<div id="div1" *ngIf="windowWidth > 767 && selectedIndex === 1">Lorum Ipsum</div> 
<div id="div2" *ngIf="windowWidth > 767 && selectedIndex === 2">Lorum Ipsum</div> 
<div id="div3" *ngIf="windowWidth > 767 && selectedIndex === 3">Lorum Ipsum</div> 
<div id="div4" *ngIf="windowWidth > 767 && selectedIndex === 4">Lorum Ipsum</div>