Angular4 - show/hide content inside a loop

Question

I am started to learn angular 4. I have multiple div section, each div section have button and content, once click the button clicked then will show the respective div, once click another button hide others.

<div *ngFor="let number of [0,1,2,3,4] ; let i = index">
  <div>
    <button (click)="showContent(this);"> Click Me {{index}} </button
    <div class="content"> Hello world {{index}}</div>
  </div>      
</div>

Js code

export class AppComponent {

  showContent(evt){

    event.target.style.display = 'block';   
  }   

}

Sorry, I added minimal code only.

Notice the tags, this is Angular, not AngularJS. Also there is no such thing as `Angularjs 4` ;) — AT82, Jan 06 '18 at 12:11
I recommend reading some basic Angular documentation before asking very elementary questions here. — henrikmerlander, Jan 06 '18 at 12:15
There is very little need in angular to do DOM manipulation, you should try to avoid it where possible — user184994, Jan 06 '18 at 12:20
Ok, could you please suggest the way to hide/show the respective content when click the button? — RSKMR, Jan 06 '18 at 12:22

score 0 · Answer 1 · answered Jan 06 '18 at 12:21

0

You can use <div *ngIf="variable"> with variable being a boolean. Your function showContent() can change variable to true and your component will be shown.

answered Jan 06 '18 at 12:21

Pierre R-A

509
9
13

1

I have multiple div in ngFor. – RSKMR Jan 06 '18 at 12:30
Well you can use `
` and set an array of boolean.
– Pierre R-A Jan 06 '18 at 12:31

Milad · Answer 2 · 2018-01-06T14:40:53.943

There are different ways to solve this problem:

1- creating another array that reserves the state of each item, which I don't like :

public state = ['none','none','none','none','none'];  


  <div *ngFor="let number of [0,1,2,3,4] ; let i = index">
    <div>
      <button (click)="state[i]='block'"> Click Me {{index}} </button
      <div [style.display]='state[i]' class="content"> Hello world {{index}}</div>
    </div>      
  </div>

2- Creating a directive that encapsulates the logic and it's reusable :

@Directive({

   selector:`[showHide]`,
   exportAs :'showHide'

})

export class ShowHideDirective{

  @Input('showHide') isHidden = true; // initial state


  public show(){

       this.isHidden = false;
  }



  @HostBinding('[atrr.hidden]') get isItHidden() { // if this is not working for you, you can change it to `[style.display]` and return the `block` or `none`
     return this.isHidden;
  };


}


<div *ngFor="let number of [0,1,2,3,4] ; let i = index">
  <div>
    <button (click)="showHideElement.show()"> Click Me {{index}} </button
    <div #showHideElement='showHide' class="content"> Hello world {{index}}</div>
  </div>      
</div>

Don't forget to declare ShowOnClickDirective in your app module.

there is a difference though, display:none wont remove the node from the DOM — Jota.Toledo, Jan 06 '18 at 13:09
@Jota.Toledo yep, but I can't see if he want's to remove it or simply hide it, based on his code snippet he wants to hide it — Milad, Jan 06 '18 at 14:42
@Milad, Once click the "Click Me" button its showing the respective content, but the same time needs to hide other contents. Its possible? — RSKMR, Jan 08 '18 at 05:11

score 0 · Answer 3 · answered Jan 06 '18 at 13:21

This might help:

<div *ngFor="let number of [0,1,2,3,4] ; let i = index">
  <div>
    <button (click)="showContent(this, index);"> Click Me {{index}} </button
    <div class="content" *ngIf="selectedIndex == index"> Hello world {{index}}</div>
  </div>      
</div>

JS:

export class AppComponent {
  selectedIndex = -1;
  showContent(evt, index) {
    this.selectedIndex = index;   
  }
}

score 0 · Answer 4 · answered Jan 06 '18 at 14:01

This might help:

<ng-container *ngFor="let item of [1,2,3,4];let i=index">
    <div style="height:40px;border:1px solid #000;margin-bottom:10px">
        <button (click)="selectedDivIndex=i">Button {{i+1}}</button>
        <div class="content" *ngIf="selectedDivIndex===i">
            Content for #{{i+1}}
        </div>
    </div>
</ng-container>

Note: Set selectedDivIndex to some default index in the component file(.ts) if you want to load content initially

Angular4 - show/hide content inside a loop

4 Answers4

Linked