fangio fangio - 1 year ago 207
Javascript Question

Plotly in Angular 4 not finding HTML element with ngIf

I am building an angular 4 App that needs a graph.
For graphs I am using

Plotly.js
, this works as it should, except if I use
ngIf
.

So what I want to do:
I have a div in wich the graph is initialized.This works the first time. I also have some filters that work just fine.However I made a button to switch the view, instead of showing a graph I want to show a table with the values of the graph.When I switch the view back to graph,then i get the error that plotly cannot find the div.

So here are parts of my code:

Parts of my component:

public graph:boolean;

public draw():void {
/*code to get data to plot*/
Plotly.newPlot('graph', this.drawing, layout, options);
}

switchView(){
this.graph = !this.graph;
if(this.graph){
this.draw();
} else {
/*tableview*/
}
}


Parts of my HTML

<div *ngIf="graph">
<div id="graph" class="graph"></div>
</div>

<div *ngIf="!graph">
<!--Table -->
</div>


<button class="btn btn-default btn-sm center-block btn-file" (click)="switchView()">
<i class="fa fa-eye"></i>
Switch View
</button>

Answer Source
constructor(private cdRef:ChangeDetectorRef){}

witchView(){
    this.graph = !this.graph;
    this.cdRef.detectChanges(); // <<< ensure the bindings are updated
    if(this.graph){
      this.draw();
    } else {
      /*tableview*/
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download