[Angular Mat.] Problème matRipple sur matTableRow

Sujet résolu

Quentin.B

17 décembre 2018 à 9:47:55

Bonjour,

Je ne sais pas si c'est un bug d'Angular Material. Donc voilà, je vous explique mon problème.

Voici le code l'exemple: StackBlitz ICI

Problème: src/app/components/users/users.component.html -> l.22

Lorsque je sélectionne un utilisateur dans la table, le matRipple ne fonctionne pas correctement sur la ligne de la table lors du click.

Si vous trouvez une solution à mon problème n'hésitez pas.

Merci d'avance!

-
Edité par Quentin.B 17 décembre 2018 à 10:15:21

Quentin.B

18 décembre 2018 à 12:25:53

J'ai trouvé la solution la voici: StackBlitz ICI

Il faut changer les balise HTML de la table comme ceci:

<mat-table>

 <ng-container matColumnDef="...">
  <mat-header-cell *matHeaderCellDef>...</mat-header-cell>
  <mat-cell *matCellDef="let user">...</mat-cell>
 </ng-container>

 <ng-container>...</ng-container>

 <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
 <mat-row matRipple *matRowDef="let user; columns: displayedColumns;"></mat-row>

<mat-table>

Et importer les module suivant:

import {MatRippleModule} from '@angular/material/core';
import {MatTableModule} from '@angular/material/table';
import {CdkTableModule} from '@angular/cdk/table';

Voila! Sujet résolu!