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

https://stackoverflow.com/questions/49886571/angular-2-how-to-select-and-loop-over-multiple-elements-with-the-same-selector, https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll, One of this could help you — sojin, Sep 21 '21 at 13:03
You need to have this line in ngAfterViewInit, not on ngOnInit..... Also you make sure, there are no *ngIf on the selector elements — Alaksandar Jesus Gene, Sep 21 '21 at 13:25

score 4 · Answer 1 · answered Sep 21 '21 at 13:21

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

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

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

export class MyComponent {

    // ...

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

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 ...>

   // ...
}

it is not working in angular 8 – user386430 Sep 24 '21 at 12:56 — user386430, Sep 24 '21 at 12:56

score 1 · Answer 2 · answered Jul 19 '23 at 09:12

I think this answer needs a small update, since the latest way of doing this in Angular 16, following the standalone standard that Angular is heading to, is:

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

@Component({
  ...
  standalone: true,
  ...
})
class MyComponent {
  private document = inject(DOCUMENT);

  ngOnInit() {
     this.document.<whatever ...>
  }
}

How to get document object in angular component

2 Answers2