CODEWITHSUNDEEP
htmlcssangulartypescript
Eya Osmane
Eya Osmane

Reputation: 19

How to show and hide div using Angular

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

Upvotes: 0

Views: 811

Answers (1)

Geshe
Geshe

Reputation: 759

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

Upvotes: 1

Related Questions