Angular 2: access an element from the Component, getDocumentById doesn't work Angular 2: access an element from the Component, getDocumentById doesn't work angular angular

Angular 2: access an element from the Component, getDocumentById doesn't work


You can use @ViewChild with a div by adding a TemplateRef.

Template

    <div id ="myId" #myId>

Component

  import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';  @Component({    selector: 'app-root',    templateUrl: './app.component.html',    styleUrls: ['./app.component.css']  })  export class AppComponent implements AfterViewInit {    @ViewChild('myId') myId: ElementRef;    constructor() {    }    ngAfterViewInit() {      console.log(this.myId.nativeElement);    }  }

This blog post by Kara Erickson is a really good read for getting familiar with the Angular approach to doing things like this.


Add Template Reference variable to the element you need access to:

<div #myDiv></div>

And in the component:

class MyComponent implements AfterViewInit {   @ViewChild('myDiv') myDiv: ElementRef;   constructor() {}   ngAfterViewInit() {      console.log(this.myDiv);   }}