Get <html> tag in Angular component

Question

<body> and <head> tag can be get in Angular component by injectingDOCUMENT, like this:

import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

export class TestComponent {
  constructor(
    @Inject(DOCUMENT) private document: Document
  )

  // get <head>
  // this.document.head

  // get <body>
  // this.document.body
}

But is it possible to get <html> tag in Angular component?

@SiddAjmera sometimes, class or style may be used on <html>. But add these attributes directly on <html> in the root index.html will take effect globally. Set encapsulation: ViewEncapsulation.None in specific component to ignore the shadow dom maybe a compromise way, but it will affect all the "none encapusulation" components, which I don't want either. — funkid
– funkid, Commented Dec 28, 2019 at 11:44

Reactgular · Accepted Answer · 2019-12-28 11:43:48Z

10

The documentElement references the root element which will be <html> in the browser.

https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement

@Component({..})
public class ExampleComponent {
   public constructor(@Inject(DOCUMENT) doc: Document) {
      console.log(doc.documentElement);
   }
}

edited Dec 28, 2019 at 11:43

answered Dec 28, 2019 at 11:41

Reactgular

55.1k24 gold badges173 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pascalpuetz Over a year ago

You need to change your console.log to reference the injected doc instead of the global variable. Otherwise, it looks good

Collectives™ on Stack Overflow

Get <html> tag in Angular component

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related