Having problems displaying multiple charts on a page

by

👍:0

You’ve done almost. 😀
It is better to execute all contents related to the displayed item in ngAfterViewInit () to prevent DOM error.
Because sometimes your DOM doesn’t exist when you display something.

Based on your template html, you have spinner.
So,

  1. Show spinner – ngOninit()
  2. Get data – ngOninit() or ngAfterViewInit()
  3. Display data – ngAfterViewInit()
  4. Hide spinner – after displaying.

Here is further information about ngOninit() : Lifecycle Hooks

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component’s input properties.
Called once, after the first ngOnChanges().

So, If you have any @Input decorator, ngOninit() is a moment to get it from template html, but not a time to show something. just good time to check properties.
Also, please remind, the constructor is not a part of angular’s lifecyle.
And be careful, *ngIf will destroy your DOM, it is not good for hiding your component.

Leave a comment