Hide and show an icon in angular mat-table 7

Asked

Viewed 266 times

0

Guys, I have a mat-table of the angular material, I’m using angular 7, I have two buttons, one of play and one of pause, start showing the play buttons in this list, I’m trying to implement a logic to, when the user clicks the play on the corresponding line, only it vanishes to be able to show the pause button, but only in the line clicked, (icon has button function)follows coded

<ng-container matColumnDef="action">
 <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
 <td mat-cell *matCellDef="let poster; let i = index"> 
     <mat-icon [id]="row-click" matTooltip="Metas de campanhas" (click)="getAction()">play_circle_outline</mat-icon> 
     <mat-icon [id]="row-click" matTooltip="Metas de campanhas" (click)="getAction()">pause_circle_outline</mat-icon>
</td>

First show the playlist and if you click on the play then just show the pause of that line in question, someone ?

angular-7

  • You can use jquery?

  • No André, otherwise it will be "Ambi" rsrsrs

  • It is interesting to use the resources of Angular itself

  • Use *ngIf it can validate this

  • @Otaviocapel I’ve done ngif, but I still can’t get the logic right ...

  • You can create a variable: play: boolean = falsethis will cause the play button to be shown first. ai in the icons you do : <mat-icon *ngIf="! play"> PLAY </mat-icon> <mat-icon *ngIf="play"> PAUSE </mat-icon> When the user press play you invert the value of the variable.

  • So, I did this way, however, by the fact of being a list, in case a table, I’ve done it but it adds all plays and vice versa, understood ... ?

  • the logic is to click the first play icon of the table and just change it

Show 3 more comments

1 answer

1

A possible solution (not so elegant) is to add an extra property to your datasource as being a Boolean, "paused" for example.

Play and pause methods would be responsible for setting this variable from the respective datasource line, already within the <td></td> you only check this variable with *ngIf

Browser other questions tagged angular-7

You are not signed in. Login or sign up in order to post.