I've encountered an issue with my Angular component. The HTML code for the component, before any TypeScript is applied, looks like this:
<svg #linechart id="chartSpace"></svg>Wanting to create a responsive webpage featuring a line chart, I attempted to set the height and width based on the view like so:
#chartSpace { width: 100vw; height: 50vh; }In order to scale the chart's axes using the obtained height and width, I followed examples from Stack Overflow and tried accessing the element with ViewChild in my TypeScript file. Unfortunately, when running the code, the height and width are logging as undefined. What could I be overlooking?
Here's the TypeScript file:
import {Component, OnInit, ElementRef, ViewChild } from '@angular/core';
@Component ({
selector: 'app-line-chart',
templateURL: './line-chart.component.html',
styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {
@ViewChild("linechart") elementView: ElementRef;
height: number;
width: number;
constructor() {}
ngOnInit() {
this.blah();
}
blah() {
this.height = this.elementView.nativeElement.offsetHeight;
this.width = this.elementView.nativeElement.offsetWidth;
console.log("height: " + this.height + " and width: " + this.width);
}
}