0
280
ViewsGot undefined when accessing variables that are initialized outside of subscribe
I'm working with Apex chart and the chart is in the second component. I need to call a function to toggle some series in second component from the first component. I'm able to call that function now but when I try to call the chart inside the subscribe, it's undefined. However if I call that chart in the ngAfterViewInit(), the chart is correct. So could anyone suggest me any ideas to access the chart inside the subscribe?
Second component:
export class DashboardComponent implements OnInit {
@ViewChild("chart") chart!: ChartComponent;
constructor(public servic: MainService, private spinner: NgxSpinnerService, private router: Router) {
this.servic.receiveMessage().subscribe(message => {
this.toggle(message)
})
}
public toggle(state: string) {
console.log(this.chart);
}
}HTML of the second component:
2 answers
Answer question0
It is not undefined because it is inside .subscribe(). It is undefined because it is inside the constructor(). This is a run time issue. Move your subscription to OnInit() or AfterViewInit() lifecycle hooks
0
your service file is getting called later that's why your "message" uder subscribe is undefined, move your service into OnInit() from constructor()..
constructor(public servic: MainService, private spinner: NgxSpinnerService, private router: Router) {}
ngOnInit(){
this.servic.receiveMessage().subscribe(message => {
this.toggle(message)
})
}
public toggle(state: string) {
console.log(this.chart);
}