title: ERROR TypeError: Cannot read property 'nativeElement' of undefined
body: <p>i am new to angular 2 and i work on image cropping plugin and i want to display the image on canvas.
  here my html code</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-6"&gt;
       &lt;canvas id="layout" width="400" height="300"&gt;
          This text is displayed if your browser does not support HTML5 Canvas.
       &lt;/canvas&gt;
  </code></pre>
  
  <p>
  and here is my typescript file</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  @Component({
  selector: 'app-four',
  templateUrl: './four.component.html',
  styleUrls: ['./four.component.css']
  })
  export class FourComponent implements OnInit {
  image: HTMLImageElement;
  profPic: any;
  context: CanvasRenderingContext2D;
  
  constructor() { }
  @ViewChild('layout') canvas;
  @ViewChild('photo') photo;
  
  ngOnInit() {
  const _canvas = this.canvas.nativeElement;
  //let photo = this.photo.nativeElement;
  this.context = (&lt;HTMLCanvasElement&gt;_canvas).getContext('2d');
    this.image = new Image();
    this.image.src = '../../assets/images/1.jpg';
  
  this.context.drawImage(this.image,20,20,500,260);
  
  }
  }
  </code></pre>
  
  <p>and i have error</p>
  
  <p><em><strong>ERROR TypeError: Cannot read property 'nativeElement' of undefined</strong></em></p>
  
  <p>please help me to fix this</p>
  
  <p>thank you</p>