How to access the nativeElement of a Component in Angular4?

Question

I have two components and one with attribute selector. The child component is,

import { Component, OnInit, Input, El         


        

Answer 1

If you need the ElementRef of a component, you can't use a template variable. If the element is a component, you'll get the component instance instead. A template variable only returns ElementRef for plain HTML elements.

To get ElementRef of a component, you need to use @ViewChild()

@ViewChild('chartContainer', { read: ElementRef }) myChartContainer:ElementRef;

and then pass it along with

[chartContainer]="myChartContainer"

I would make the input a setter

 private _chartContainer:ElementRef;
 @Input() 
 set chartContainer(value: ElementRef) {
   this._chartContainer = value;
   console.log(this.chartContainer);
   console.log(this.chartContainer.nativeElement);
 }

but ngOnInit works as well Plunker example