How to get document object in angular component

Question

can anybody tell how to get document object angular. I have tried with ElementRef. It is not working

let elements = this.elem.nativeElement.querySelectorAll('.classImLookingFor');

Can anybody suggest how to get querySelectorAll in component in angular?

Thanks

Answer 1

1. import Inject from @angular/core and DOCUMENT from @angular/common

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

2. Inject the DOCUMENT interface inside your class' constructor like this:

export class MyComponent {

    // ...

constructor(@Inject(DOCUMENT) private document: Document) {}

3. Now you can use the document object inside your class methods. Intellisense will display all the methods and properties of the Document interface, such as querySelector, getElementById, addEventListener etc..

myMethod() {
   this.document.<whatever ...>

   // ...
}