CODEWITHSUNDEEP
angular
Ronald Zarīts
Ronald Zarīts

Reputation: 12699

Accessing DOM in Angular 2 RC

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'

Upvotes: 8

Views: 4034

Answers (2)

Stefan Rein
Stefan Rein

Reputation: 9036

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

Upvotes: 3

Ankit Singh
Ankit Singh

Reputation: 24945

  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

Upvotes: 5

Related Questions