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, ElementRef } from '@angular/core';   @Component({     selector: '[app-bar-chart]',     templateUrl: './bar-chart.component.html',     styleUrls: ['./bar-chart.component.css'] }) export class BarChartComponent implements OnInit {      @Input() chartContainer: ElementRef;     @Input() title: string;     @Input() chartData: {         title: string,         content: {             label: string,             value: number,             fill?: string         }[]     }[];      constructor() { }      ngOnInit() {         console.log(this.chartContainer);         console.log(this.chartContainer.nativeElement);     }  } 

The parent component is,

import { Component, OnInit, Output, ViewChild, ElementRef } from '@angular/core';  @Component({     selector: 'app-dashboard',     template: `<div><div class="graph-image" style="width: 100%; height: 400px;" app-bar-chart [title]="barChartTitle" [chartData]="ChartData" [chartContainer]="chartContainer" #chartContainer></div></div>`,     styleUrls: ['./dashboard.component.css'] }) export class DashboardComponent implements OnInit {     barChartTitle = 'Transaction History';     ChartData = [         {             "title": "May2017",             "content": [                 {                     "label": "payable",                     "value": 10                 }             ]         },         {             "title": "Jun2017",             "content": [                 {                     "label": "payable",                     "value": 120                 }             ]         }     ];     constructor() { }      ngOnInit() {     }  } 

I am passing the local reference from the parent component to the child component. When I am consoling the native element of this local reference it is 'undefined'. How can I access the native element so that I can access the style width and height of the component div.

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