How to access nativeElement component in Angular4?

Question

I have two components and one with an attribute selector. Children's component -

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); } } 

Parent component:

 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 a local link from the parent component to the child component. When I console my own element of this local link, it is "undefined". How can I access my own element to access the width and height of the style of the div component.

Answer 1

The problem is that if you define a template link for an element that Angular treats as a component host element, you will get a link to the component instance. Here:

 <... chartContainer]="chartContainer" #chartContainer></div> 

chartContainer will point to an instance of BarChartComponent , and therefore nativeElement is undefined.

To get the elementRef of a host element, you do not need bindings or life cycle bindings, just enter the element in the constructor:

 export class BarChartComponent implements OnInit { constructor(element: ElementRef) { console.log(element.nativeElement); } 

Answer 2

If you need an ElementRef component, you cannot use a template variable. If the item is a component, you will get an instance of the component. The template variable returns only ElementRef for simple HTML elements.

To get the ElementRef component you need to use @ViewChild()

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

and then pass it along with

 [chartContainer]="myChartContainer" 

I would do setter input

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

but ngOnInit also works Example plunger

Answer 3

In the first selector you set '[app-bar-chart]', and it should be without square braces. To pass a parent, you should use:

  [chartContainer]="this" 

instead:

  [chartContainer]="chartContainer"