Passing a string variable to querySelector() in an angular2 component

Question

When I hardcode the css selector inside querySelector(), everything goes well. But, when I pass the css selector as a variable of type string, it doesn't work (Actually, when I log the result of querySelector with the css selector variable passed to it, there is an object in console but nothing has changed in DOM). In this component, I've created an "amChart" chart and I want to change the font family of the value and category axes of the chart.

here is the component.ts and component.html files:

 import {AfterViewInit, Component, ElementRef, Input, OnInit, Renderer} from '@angular/core'; import { AmChartsService } from '@amcharts/amcharts3-angular'; import { AmChartDataProviderService } from '../../services/amChartDataProvider'; import { LineAmChartsColorPickerService } from '../../services/lineAmChartsColorPicker'; @Component({ selector: 'am-chart', templateUrl: './am-chart.component.html', styleUrls: ['./am-chart.component.scss'], }) export class AmChartComponent implements OnInit, AfterViewInit { private chart: any; private data: object; private cssSelector: string; @Input() chartId: string; constructor(private _amChartsService: AmChartsService, private _amChartDataProvider: AmChartDataProviderService, private _lineAmChartColorPicker: LineAmChartsColorPickerService, private _el: ElementRef, private _renderer: Renderer) { this.cssSelector = `#${this.chartId} .amcharts-chart-div`; } ngOnInit() { this.data = this._amChartDataProvider.getData(); this.data = this._lineAmChartColorPicker.lineAmChartColorPicker(this.data); this.chart = this._amChartsService.makeChart(this.chartId, this.data); this.chart.addListener('rendered', (event) => { this._renderer.setElementStyle(this._el.nativeElement.querySelector(this.cssSelector), 'font-family', 'B Nazanin'); // this line of code doesn't work properly. I should pass "#chart1 .amcharts-chart-div" instrad of this.cssSelector. }); } ngAfterViewInit() { this.data = this._amChartsService.makeChart(this.chartId, this.data); } private zoomChart() { this.chart.zoomToIndexes(this.chart.dataProvider.length - 20, this.chart.dataProvider.length - 1); } } 

 <div id="{{chartId}}" class="chart-dimensions"></div> 

Answer 1

I found the answer myself! First I should use amcharts3 instead of amcharts-angular package because there is a plugin called "amchart responsive" that handles the change of the chart's container. Secondly, I should only call makeChart once in ngAfterViewInit(). Here's my final component.ts and component.html and component.scss:

 import {AfterViewInit, Component, DoCheck, ElementRef, Input, OnInit, Output, Renderer, ViewChild} from '@angular/core'; import { AmChartsService } from '@amcharts/amcharts3-angular'; import { AmChartDataProviderService } from '../../services/amChartDataProvider'; import { LineAmChartsColorPickerService } from '../../services/lineAmChartsColorPicker'; import 'amcharts3'; import 'amcharts3/amcharts/plugins/responsive/responsive.js'; import 'amcharts3/amcharts/serial.js'; import 'ammap3'; import 'ammap3/ammap/maps/js/worldLow'; @Component({ selector: 'am-chart', templateUrl: './am-chart.component.html', styleUrls: ['./am-chart.component.scss'], }) export class AmChartComponent implements OnInit, AfterViewInit { private chart: any; private data: object; @Input() chartId: string; @ViewChild('myAmChart') _selector: ElementRef; constructor(private _amChartsService: AmChartsService, private _amChartDataProvider: AmChartDataProviderService, private _lineAmChartColorPicker: LineAmChartsColorPickerService) { } ngOnInit() { this.data = this._amChartDataProvider.getData(); this.data = this._lineAmChartColorPicker.lineAmChartColorPicker(this.data); // this.chart = this._amChartsService.makeChart(this.chartId, this.data); // this.chart = AmCharts.makeChart(this._selector.nativeElement, this.data); } ngAfterViewInit() { this.chart = AmCharts.makeChart(this._selector.nativeElement, this.data); } private zoomChart() { this.chart.zoomToIndexes(this.chart.dataProvider.length - 20, this.chart.dataProvider.length - 1); } } 

 .chart-dimensions { width:100%; height:380px; } 

 <div #myAmChart id="{{chartId}}" class="chart-dimensions"></div>