I'm trying to dynamically add a style sheet to an Angular Element. I'm doing this by adding a to the template. This works fine if I do it through JavaScript. E.g.
newLinkElement.setAttribute('href', '//mystyles.css')
But if I try to do this with a binding:
<link rel="stylesheet" type="text/css" id="backgroundImageStyles" href="{{stylesUrl}}">
I get this error
ERROR in HostResourceResolver: could not resolve {{stylesUrl}}
. If I just change the attribute I'm binding to then the error goes away. E.g. this works:
<link rel="stylesheet" type="text/css" id="backgroundImageStyles" lang="{{stylesUrl}}">
I've tried [attr.href]
and [href]
as well with no luck. Does Angular not allow binding to the href attribute of a link?