Chart issues with *ngIf in angular 2

Question

I was trying to display a chart after loading the data. So I implemented a conditional div rendering using *ngIf where the div area will be loaded on successful data retrieval. I had a couple of highcharts in this div which were not loading then.

I came across this post which says that we cannot use ngIf for charts in angular 2. But when I avoid using ngIf and use ngShow/ng-show/ngCloak, the charts are loading, but the data in the page are not loaded.

<div class=title-bar *ngIf="isLoaded">
  <div class=container><a class=btn-back href=temp.html>Back</a>
    <p class=title>{{project.name}}</p>
    <div class=col-sm-6>
      <div id='chart-2'></div>
    </div>
  </div>
</div>

Here, I was trying to load the chart into id=chart-2. When I don't use *ngIf, the chart is loaded, but not project object. Is there another alternative to implement the functionality here?

Answer 1

I had fixed this issue using a work around. Posting it here so that anyone can use it in the future.

I am using the class 'invisible' (display:none;) when isLoaded=false.

<div class="tabs {{isLoaded? '': 'invisible'}}">
  <div class=container><a class=btn-back href=temp.html>Back</a>
    <p class=title>{{project.name}}</p>
    <div class=col-sm-6>
      <div id='chart-2'></div>
    </div>
  </div>
</div>

Answer 2

I'm not sure about the way to avoid the problem with Highcharts inside ngIf block, but if when you remove the ngIf the charts are loading, there's a simple solution for the project.name part.

Angular templates have a feature called safe navigation operator, which makes sure values are only interpolated when they are available.
You can use <p class=title>{{project?.name}}</p> which protects you from project being undefined before it's loaded.