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]

Most helpful comment

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

All 3 comments

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

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?

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

Was this page helpful?
0 / 5 - 0 ratings