CODEWITHSUNDEEP
angularsvg
chris01
chris01

Reputation: 12321

Angular: SVG attribute by event

How can I access the atrribute (e.g. fill) of an SVG object via an Angular event (e.g. mouseenter)?

I tried these variants without success.

<rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.fill='red'/>

<rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.attr.fill='red'/>

<rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.attributes.fill='red'/>

I want to do it directly - so I use the #rrr. Dispatching it over a component-variable is working well - but not what I want.

<rect [attr.fill]="myvar == true ? 'red' : 'green'" (mouseenter)="myvar = true"/>

Upvotes: 1

Views: 269

Answers (2)

yurzui
yurzui

Reputation: 214017

You can use any of these options:

#rrr (mouseenter)="rrr.setAttribute('fill', 'red')"

#rrr (mouseenter)="rrr.style.fill = 'red'"

Upvotes: 1

Zrelli Majdi
Zrelli Majdi

Reputation: 1260

Try to use class to achieve that:

<rect [ngClass] = "{'red': myvar==true, 'green': myvar!=true}"/>

On your css:

.gren {
    fill:green;
}
.red{
   fill: red;
}

Upvotes: 0

Related Questions