Where does DOM manipulation belong in Angular 2?
Based upon recommend solution by developers: http://angularjs.blogspot.de/2016/04/5-rookie-mistakes-to-avoid-with-angular.html
@Component({ selector: 'my-comp', template: ` <div #myContainer> </div> `})export class MyComp implements AfterViewInit { @ViewChild('myContainer') container: ElementRef; constructor() {} ngAfterViewInit() { var container = this.container.nativeElement; console.log(container.width); // or whatever }}Attention: The view child name has to begin with myName and in the template you need #.
Direct DOM manipulation should be avoided entirely in Angular2.
Use instead bindings like:
export class MyComponent { constructor() { this.setHeight(); } @HostBinding('style.height.px') height:number; @HostListener('window:resize', ['$event']) setHeight() { this.height = window.innerHeight; }}