Q:

Chart issues with *ngIf in angular 2

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?

A:

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>

