title: How do I properly handle change detection on a component that relies on a ViewChild and data from an observable in Angular 2?
body: <p>So presently, I have a component that fits into a larger dashboard for rendering a graph of a node's immediate parent and child relationships. This component is supposed to refresh its graph every time the <code>node_id</code> input is changed externally.</p>
  
  <p>I've included a simplified version of my code.</p>
  
  <pre><code>@Component({
    selector: 'relations',
    template: `
        &lt;div [class]="'panel panel-' + (_loading ? 'default' : 'primary')"&gt;
            &lt;div class="panel-heading"&gt;Child relations&lt;/div&gt;
            &lt;div class="panel-body"&gt;
                &lt;div class="loading" *ngIf="_loading" style="text-align: center"&gt;
                    &lt;img src="./loading.gif" height="100px" width="100px" /&gt;
                &lt;/div&gt;
                &lt;div class="graph_container" [style.display]="_loading ? 'none': 'block'" #my_graph&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      `
  })
  export class GraphComponent implements OnChanges {
  
      @Input('node_id') node_id;
      @ViewChild('my_graph') graphDiv;
  
      private _loading: boolean = true;
      private _current_node: Node;
      private _parent: Node;
      private _children: Node[];
  
      constructor(
          private _nodeService: NodeService
      ) {}
  
      ngOnChanges(changes){
          this.getRelations();
      }
  
      getRelations() {
          this._loading = true;
          Observable.combineLatest(
              this._nodeService.getEvent(this.node_id),
              this._nodeService.getChildren(this.node_id),
              this._nodeService.getParent(this.node_id)
          ).subscribe(v =&gt; {
              this._current_node = v[0];
              this._children = v[1];
              this._parent = v[2];
              this._loading = false
              this.renderGraph();
          });
      }
  
      renderGraph() {
          ...
      }
  }
  </code></pre>
  
  <p>Now the issue I'm having is a race condition; the <code>renderGraph()</code> method relies on the <code>@ViewChild('my_graph') graphDiv</code> variable to know where it should drop the canvas element for rendering the graph. Because of this, when the observable resolves, it may try to call <code>renderGraph()</code> before the <code>@ViewChild</code> component has initialized.</p>
  
  <p>I've tried playing with the lifecycle hooks by doing things such as:</p>
  
  <pre><code>ngAfterViewInit(){
      if (!this._loading){
          this.renderGraph();
      }
  }
  </code></pre>
  
  <p>That only helps if the observable finishes before the view is loaded, and causes no graph to be rendered should the view finish rendering first.</p>
  
  <p>So my question is, how can I properly achieve what I want? That is to say, re-rendering the graph following the observable resolving in response to a change to <code>node_id</code>.</p>
  
  <p>I'm very new at Angular 2 (and front end in general), and my intuition tells me I'm not using the observable in a way it's intended to be used, but I've had difficulty in finding any examples similar to what I want.</p>
  
  <p>Any help/guidance/advice would be greatly appreciated.</p>
  
  <p>Thanks!</p>