title: Ionic/Chart.js - Cannot read property 'nativeElement' of undefined
body: <p>I have a simple project that displays an Ionic segment in which there is a Chart.js barchart. I have no problem with displaying the chart itself, but trying to put the chart HTML inside Ionic segment gives me the following error:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'nativeElement' of undefined
      at HomePage.webpackJsonp.203.HomePage.ionViewDidLoad (home.ts:19)
  </code></pre>
  
  <p>If I just move <code>&lt;canvas #barcanvas&gt;&lt;/canvas&gt;</code> and place it almost anywhere else in the .html document, the chart displays nicely, but not inside the Ionic segment element.</p>
  
  <p>home.html</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;
        Ionic Blank
      &lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;
    &lt;div padding&gt;
      &lt;ion-segment [(ngModel)]="pet"&gt;
        &lt;ion-segment-button value="kittens"&gt;
          Kittens
        &lt;/ion-segment-button&gt;
        &lt;ion-segment-button value="puppies"&gt;
          Puppies
        &lt;/ion-segment-button&gt;
      &lt;/ion-segment&gt;
    &lt;/div&gt;
  
    &lt;div [ngSwitch]="pet"&gt;
      &lt;ion-list *ngSwitchCase="'puppies'"&gt;
        puppies...
        &lt;canvas #barcanvas&gt;&lt;/canvas&gt;
      &lt;/ion-list&gt;
  
      &lt;ion-list *ngSwitchCase="'kittens'"&gt;
        kittens...
      &lt;/ion-list&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>home.ts</p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { NavController } from 'ionic-angular';
  import { Chart } from 'chart.js';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
    @ViewChild('barcanvas') barcanvas;
    barChart: any;
  
    constructor(public navCtrl: NavController) {
  
    }
  
    ionViewDidLoad() {
  
      this.barChart = new Chart(this.barcanvas.nativeElement, {
  
        type: 'bar',
        data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255,99,132,1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          }]
        }
  
      });
  
    }
  }
  </code></pre>