toggle Onclick of button arrow up and arrow down icon change in Angular?

i want to toggle the mat icon on-click arrow it should UP and on-click again the same mat icon the arrow should Down.

For Referrence stack Blitz:- https://stackblitz.com/edit/angular-fnvhnn-jtlqod?file=app%2Fexpansion-overview-example.html

What i am exactly looking is if we click Monster arrow, this arrow only needs to toggle up and down, and if we click Roach arrow, this arrow only needs to toggle up and down so please help us how can we achieve this in angular?

Please check the below code for referrence:-

<div style="display: flex;justify-content: space-evenly;">
    <div *ngFor="let value of cricketList">
        <p (click)='clickOntab(tab)' >{{value.player}}</p>
    <button class="staticIcon"   (onShown)="onPopoverShown()" mat-icon-button>
        <mat-icon *ngIf="!showLess" (click)="showResult(hub)">expand_more</mat-icon>
            <mat-icon *ngIf="showLess" (click)="hideResult(hub)">expand_less</mat-icon>
     </button>  
    </div>
</div>

sample data:-

 cricketList = [
    {
      player: "Monster",
      category: "basket"
    },
    {
      player: "Roach",
      category: "cricket"
    },
    {
      player: "Messi",
      category: "football"
    },
    {
      player: "Ms",
      category: "carrom"
    },
    {
      player: "Fedral",
      category: "tennis"
    }
        
  ];

toggle method

showResult(){
   
    let showLess = true;
  }

  hideResult() {
    let showLess = false;
  }


Read more here: https://stackoverflow.com/questions/64893340/toggle-onclick-of-button-arrow-up-and-arrow-down-icon-change-in-angular

Content Attribution

This content was originally published by Maniselvam R at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: