Angular2 - using a directive in <head>

3
votes

I have a custom image directive I want to use in my index.html to load the favicon

<head>    
   <link rel="shortcut icon" [my_directive]="path to image"/>
   ...
</head>
<body>
    <div class="content"></div>
</body>

the problem is that main Angular component is bootstrapping into the content div and the directive in the head section is ignored.

Any advice on bootstrapping a component so that I can use it's directive in the html head?

Update

I created a Plunker with a simplified use case, where I created a directive that is rendered as expected under a component but ignored in the index.html, see http://plnkr.co/edit/zZoR0kiCm1szy7dlXtdk?p=preview

Any advice is appreciated

1
angularangular2-directives

1 Answers

1
votes

Directives and all kinds of Angular2 template binding syntax can only be used within Angular2 component templates.

You can bootstrap a component on the <head> element but Angular purges the whole content of the element where a component is bootstrapped on.

Therefore there is no sane way of using directives on or in <head>