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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…