Angular

Question

I'm using Angular 4.3.1.

Suppose I have this index.html file :

<!DOCTYPE html>
<html>
  <head>
    <base href="." />
     ...
     ...
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>
</html>

An App "domain" is starting from the <my-app> elements and its inner elements.

But what if I want to access the <head> element and set one of it's attribute to some value ?

Something like :

  <head [myVal]="myObjectVal">

Sure I can access the DOM via Document.querySelector() , But I wonder if there's a better way ( Angular way maybe?)

Question:

Suppose I have a service (@Injectable) and it has an object , how can I set <head [myVal]="myObjectVal"> in the Angular way ?

PLUNKER

Günter Zöchbauer · Accepted Answer

Angular doesn't support binding to elements outside the root element.

You can use plain TS/JS like

document.querySelector('head')...

There is also the Meta service that allows to set meta tags.

Angular - How can I access an outside app element?