Plotly in Angular 4 not finding HTML element with ngIf

Question

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 which 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>

Most likely Angular did not manage to detect change and insert the graph div. IMO the cleanest solution would be to create a component which accepts data as input and plots it. You can then show/hide it with *ngIf or with CSS. You can also trigger the change detection manually but I cannot guarantee it will happen before plot function is called. — jacekbj
– jacekbj, Commented Jul 27, 2017 at 13:33
hi @fangio , I am trying to use plotly.js with Angular 4, as per this question(stackoverflow.com/questions/48347425/angular-4-with-plotly). Can you share with us on how can we use plotly.js? Thanks. — Afeez Aziz
– Afeez Aziz, Commented Jan 21, 2018 at 13:44

fangio · Accepted Answer · 2017-07-27 14:15:40Z

3

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef){}

switchView(){
    this.graph = !this.graph;
    this.cdRef.detectChanges(); // <<< ensure the bindings are updated
    if(this.graph){
      this.draw();
    } else {
      /*tableview*/
    }
}

edited Jul 27, 2017 at 14:15

fangio

1,8265 gold badges30 silver badges56 bronze badges

answered Jul 27, 2017 at 13:48

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Plotly in Angular 4 not finding HTML element with ngIf

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related