angular_components
angular_components copied to clipboard
How do I dynamically reference a material-icon for a material-tooltip-card?
I'm creating table rows in with an *ngFor. For certain students I would like to show an icon that shows a material-tooltip-card when hovered over it. Is there a way I can dynamically change #ref1?
`<tr *ngFor="let student of course.students ;[routerLink]="studentUrl(student.externeDatenbankID.toString())"> <td *ngIf="hasWarning"> <div *ngIf="student.spezialfallProtokolle.length>0"> <material-icon icon="error_outline" tooltipTarget tabIndex="0" keyboardOnlyFocusIndicator size="medium" #ref1="tooltipTarget"> <material-tooltip-card [for]="ref1" focusContents> Content for {{student.name}}
`Because all icons now have the same reference the tooltip-card flips between all instances when hovered over the icon.