Skip to content
This repository has been archived by the owner on May 20, 2023. It is now read-only.

How do I dynamically reference a material-icon for a material-tooltip-card? #439

Open
sigi77 opened this issue Sep 26, 2019 · 0 comments
Open

Comments

@sigi77
Copy link

sigi77 commented Sep 26, 2019

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant