Angular: Cannot interpolate ({{}}) into class attribute of svg shape

Created on 27 May 2016 · 3Comments · Source: angular/angular

I'm submitting a ...
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, see note at the top of this template.

Current behavior
Cannot interpolate ({{}}) into the class attribute of an svg shape unless the same element also has [ngClass]="" on it.

Expected/desired behavior
Interpolation of arbitrary text into class attribute of any element ought to be possible - with or without [ngClass]=""

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
Reproduced here:
https://plnkr.co/edit/mVe6NH?p=preview
What is the expected behavior?
Both lines as well as the h1 should turn red as a result of having the 'red' class applied.
What is the motivation / use case for changing the behavior?
.. there should be order in the world ¯_(ツ)_/¯
Please tell us about your environment:
Angular version: 2.0.0-rc1
Browser: [ Chrome 50 | Firefox 34 | Safari 9.0.3 ]
Language: [TypeScript]

Source

lsim

Most helpful comment

You should bind to the attribute with SVG, ie [attr.class]="color"

vicb on 27 May 2016

👍2

All 3 comments

You should bind to the attribute with SVG, ie [attr.class]="color"

vicb on 27 May 2016

👍2

Thanks for that tip - it works like a charm!

I expect I won't be the last to be caught by surprise by this seeming inconsistency, though. I did spend a bit of time looking for special rules regarding svg in the angular docs - but came up empty handed. What did I miss?

lsim on 28 May 2016

👍1

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}