angulardart / angular_components

The official Material Design components for AngularDart. Used at Google in production apps.

Home Page:https://pub.dev/packages/angular_components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.