0

I have a button and a div in a ngfor loop and I want each button to be able to show and hide the div each time i click on it the problem is that I don't already know the number of buttons and div it depends on the data in my database. just want every button to be responsible on the div next to it:

here is the code:

<div *ngFor="let par1 of lstUser1">

  <button id="bt2" class="arrow2" (click)="arrowButton('bt2')">
    my button
  </button>

  <div>
    my div to show and hide
  </div>

</div>

and here is an example of the design i'm trying to make

enter image description here

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Eya Osmane
  • 19
  • 8

1 Answers1

1

Yuo can use for show and hide div

*ngIf

 <div *ngFor="let par1 of lstUser1">
         
          <button id="bt2" class="arrow2"
          (click)="changeMyDivStatus()">
          my button
          </button>
          
          <div *ngIf="showMyDiv">
              my div to show and hide
         </div>
 </div>

.ts file must have "showMyDiv" variable as boolean variable

changeMyDivStatus(){
   showMyDiv = !showMyDiv;
}
Geshe
  • 679
  • 1
  • 9
  • 23
  • but if i do that it wouldnt get which div i want to show especially because i have 3 nested loops each one have an endefinde number of buttons and divs so i cant make only one variable for all of them . – Eya Osmane Mar 22 '21 at 12:03
  • I just say how to use *ngIf. You must specify id and you can use it for nested loops to sepicified ids. – Geshe Mar 22 '21 at 12:26
  • https://stackoverflow.com/a/7927456/5736794 can help you. I think you must write nested for loops in .ts file. – Geshe Mar 22 '21 at 12:47