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

[lsim]

• I'm submitting a ...
• 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]

[vicb]

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

[lsim]

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?

[angular-automatic-lock-bot]

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.}