How to show and hide div using Angular

Question

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

What about using angular material tree ?material.angular.io/components/tree/examples — Benjamin Barbé
– Benjamin Barbé, Commented Mar 22, 2021 at 11:37

Geshe · Accepted Answer · 2021-03-22 11:45:46Z

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

answered Mar 22, 2021 at 11:45

Geshe

7992 gold badges11 silver badges23 bronze badges

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

3 Comments

Eya Osmane Over a year ago

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 .

Geshe Over a year ago

I just say how to use *ngIf. You must specify id and you can use it for nested loops to sepicified ids.

Geshe Over a year ago

stackoverflow.com/a/7927456/5736794 can help you. I think you must write nested for loops in .ts file.

Collectives™ on Stack Overflow

How to show and hide div using Angular

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related