How to inject Document in service?

by

This has been supported by Angular for a while.

You can use the DOCUMENT constant provided by the @angular/common package.

Description of the DOCUMENT constant (taken from the API documentation):

A DI Token representing the main rendering context. In a browser, this is the DOM Document.

An example is as shown below:

my-service.service.ts:

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

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

my-service.service.spec.ts

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

import { MyService } from './my-service';

class MockDocument {}

describe('MyService', () => {
  beforeEachProviders(() => ([
    provide(DOCUMENT, { useClass: MockDocument }),
    MyService
  ]));

  ...
});

More Related Contents:

  1. Expression ___ has changed after it was checked
  2. Angular 2 @ViewChild annotation returns undefined
  3. Angular 2 – Return data directly from an Observable
  4. How to return value from function which has Observable subscription inside?
  5. How do I actually deploy an Angular 2 + Typescript + systemjs app?
  6. Define global constants
  7. How to use moment.js library in angular 2 typescript app?
  8. Chaining RxJS Observables from http data in Angular2 with TypeScript
  9. How can I declare a global variable in Angular 2 / Typescript? [closed]
  10. Angular 2: Convert Observable to Promise
  11. Angular2 – should private variables be accessible in the template?
  12. Angular2 canActivate() calling async function
  13. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  14. How can I listen for keypress event on the whole page?
  15. How do you deploy Angular apps?
  16. Angular2 – Http POST request parameters
  17. Angular 2 View will not update after variable change in subscribe
  18. Select based on enum in Angular2
  19. Angular2 handling http response
  20. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  21. angular2 bootstrap with data from ajax call(s)
  22. Integrating Material Design Lite with Angular2
  23. How to use select/option/NgFor on an array of objects in Angular2 [duplicate]
  24. How can I declare a global variable in Angular 2 and up / Typescript? [closed]
  25. How to create an Observable from static data similar to http one in Angular?
  26. Angular2 – root relative imports
  27. RxJs Array of Observable to Observable of Array
  28. Angular2 HTTP GET – Cast response into full object
  29. What exactly $event object do in Angular 2?
  30. How to deal with http status codes other than 200 in Angular 2

Leave a Comment