title: Show/Hide Multiple Divs angular2
body: <p>I want to use some Li list to show/hide multiple divs angular2.</p>
  
  <p>The page will initially show all divs. when the small screen i hide some div in In small screen when i click list 1 how to show the particular Div   </p>
  
  <pre><code>&lt;li&gt;&lt;i class="fa fa-location-arrow" aria-hidden="true" (click)="showDiv(1)"&gt;&lt;/i&gt;Locator&lt;/li&gt;
  &lt;li&gt;&lt;i class="fa fa-gift" aria-hidden="true" (click)="showDiv(2)"&gt;&lt;/i&gt;Offer&lt;/li&gt;
  &lt;li&gt;&lt;i class="fa fa-phone" aria-hidden="true" (click)="showDiv(3)"&gt;&lt;/i&gt; Contact&lt;/li&gt;
  &lt;li&gt;&lt;i class="fa fa-calendar" aria-hidden="true" (click)="showDiv(4)"&gt;&lt;/i&gt;Holiday&lt;/li&gt;
  &lt;li&gt;&lt;i class="fa fa-question-circle-o" aria-hidden="true" (click)="showDiv(4)"&gt;&lt;/i&gt;FAQ&lt;/li&gt;
  
  &lt;div id="div1" *ngIf="windowWidth &gt; 767"&gt;Lorum Ipsum&lt;/div&gt;
  &lt;div id="div2" *ngIf="windowWidth &gt; 767"&gt;Lorum Ipsum&lt;/div&gt;
  &lt;div id="div3" *ngIf="windowWidth &gt; 767"&gt;Lorum Ipsum&lt;/div&gt;
  &lt;div id="div4" *ngIf="windowWidth &gt; 767"&gt;Lorum Ipsum&lt;/div&gt;
  </code></pre>
  
  <p>file.ts:</p>
  
  <pre><code>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;
    }
  </code></pre>