Accessing DOM in Angular 2 RC

Question

What is the proper way to manipulate the DOM in Angular 2 RC?

For instance, I'm building a service for debug purposes to swap out .css file references in the document .

Prior to Angular 2 RC, it was possible to use BrowserDomAdapter from DOM manipulations, like so:

import { BrowserDomAdapter } from 'angular2/platform/browser';

...
constructor(private domAdapter: BrowserDomAdapter) {
}
...

const document = this.domAdapter.defaultDoc();

This was inspired by the Title service (now in @angular/platform-browser). It seems that the Title service still uses it internally, but it is no longer exported for use outside of Angular. I.e.

import { BrowserDomAdapter } from "@angular/platform-browser";

Results in:

Module '".../@angular/platform-browser/index"' has no exported member 'BrowserDomAdapter'

Answer 1

  import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';

---

UPDATE:(comment)

an issue on GitHub explains that the removal was indeed accidental, so hopefully it will be back in rc2. - @paul

Answer 2

For people like me, looking forward for interacting with the DOM in angular 2.4:

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({})
export class MyClass {

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

    doSomething() {
        this.document.someMethodOfDocument();
    }
}

You should not use any adapter. This is implementation detail and should not be used. Instead @Inject(DOCUMENT) into your component and use it.

Further reading: https://github.com/angular/angular/issues/8509