0

In an Angular 2 application I need to check whether or not a chrome extension is installed. To do so Google recommends here to check for a DOM element added by the extension. I'm implementing the extension as well so it's no problem to add that element when the extension loads.

But I'm struggling with the Angular side. I have a service that handles the logic with the extension (install etc.), and I would like to implement the check there as well. Unfortunately I could not figure out how to get access to the whole DOM.

There is the injectable class ElementRef with the property nativeElement, but that only gives me access to the DOM element that belongs to the component. Since the element added by the extension is a direct child of body that does not work here.

Does anyone now how to get access to the whole DOM in an Angular 2 compliant way?

tschuege
  • 761
  • 1
  • 8
  • 20
  • 3
    What about `document.querySelector(...)`? – Günter Zöchbauer Aug 08 '16 at 11:13
  • @GünterZöchbauer document is available, but I thought it was not a good idea to rely on it since it only exists in the browser. But with your help I found the variable [DOCUMENT](https://angular.io/docs/ts/latest/api/platform-browser/index/DOCUMENT-let.html) exported by angular. And [here](http://stackoverflow.com/questions/37521298/how-to-inject-document-in-angular-2-service) I found a way to inject it to my service. That seems to work. – tschuege Aug 08 '16 at 11:51

2 Answers2

0

EDIT Please check the link provided by tschuege if tempted to used the solution below.

Import renderer:

import {Renderer} from '@angular/core';

Inject it:

constructor(private renderer: Renderer)

Then get the element reference by issuing:

renderer.selectRootElement(<elementID>)
AndreasV
  • 234
  • 1
  • 6
  • Not sure if that is the right way to do it. Have a look a this [post](http://stackoverflow.com/questions/36055585/renderer-multiple-selectrootelement-issue-with-plnkr-provided). – tschuege Aug 08 '16 at 12:28
0

I finaly solved it by getting @document injected into the constructor:

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

and then query for the element

this.document.querySelector('#idToCheck');

This solution works fine in my case.

tschuege
  • 761
  • 1
  • 8
  • 20