Show/Hide Multiple Divs angular2

Question

I want to use some Li list to show/hide multiple divs angular2.

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

<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;
  }

Günter Zöchbauer · Accepted Answer · 2017-01-20 07:06:01Z

6

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>

edited Jan 20, 2017 at 7:06

answered Jan 20, 2017 at 6:57

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ganesh sridhar Over a year ago

ok after hide how can i show particular Div when i click event? like jsfiddle.net/XwN2L

Günter Zöchbauer Over a year ago

I updated my answer. If you want to show/hide a single div, ng-container is no help.

Collectives™ on Stack Overflow

Show/Hide Multiple Divs angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related