How do I dynamically reference a material-icon for a material-tooltip-card?
sigi77 opened this issue · comments
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.