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 ?
You can use jquery?
– Andre Lacomski
No André, otherwise it will be "Ambi" rsrsrs
– Rafael Moura
It is interesting to use the resources of Angular itself
– Rafael Moura
Use *ngIf it can validate this
– OtavioCapel
@Otaviocapel I’ve done ngif, but I still can’t get the logic right ...
– Rafael Moura
You can create a variable:
play: boolean = false
this 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.– OtavioCapel
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 ... ?
– Rafael Moura
the logic is to click the first play icon of the table and just change it
– Rafael Moura