How To Inject Document In Angular Component Or Service

In this quick tutorial, we'll be injecting document object inside an Angular component.

Injecting the document object in an Angular component is quite straightforward. All you need to do is import the DOCUMENT DI token from @angular/common. 

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

And insert it using in @Inject decorator.

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

@Component({.....})
export class OrderComponent {
    constructor (
        @Inject(DOCUMENT) private document: Document
    ) {}
}

You could do the same for a service

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

@Injectable({.....})
export class OrderService {
    constructor (
        @Inject(DOCUMENT) private document: Document
    ) {}
}