title: How to access the nativeElement of a Component in Angular4?
body: <p>I have two components and one with attribute selector. The child component is,</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit, Input, ElementRef } from '@angular/core';
  
  
  @Component({
      selector: '[app-bar-chart]',
      templateUrl: './bar-chart.component.html',
      styleUrls: ['./bar-chart.component.css']
  })
  export class BarChartComponent implements OnInit {
  
      @Input() chartContainer: ElementRef;
      @Input() title: string;
      @Input() chartData: {
          title: string,
          content: {
              label: string,
              value: number,
              fill?: string
          }[]
      }[];
  
      constructor() { }
  
      ngOnInit() {
          console.log(this.chartContainer);
          console.log(this.chartContainer.nativeElement);
      }
  
  }
  </code></pre>
  
  <p>The parent component is,</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit, Output, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
      selector: 'app-dashboard',
      template: `&lt;div&gt;&lt;div class="graph-image" style="width: 100%; height: 400px;" app-bar-chart [title]="barChartTitle" [chartData]="ChartData" [chartContainer]="chartContainer" #chartContainer&gt;&lt;/div&gt;&lt;/div&gt;`,
      styleUrls: ['./dashboard.component.css']
  })
  export class DashboardComponent implements OnInit {
      barChartTitle = 'Transaction History';
      ChartData = [
          {
              "title": "May2017",
              "content": [
                  {
                      "label": "payable",
                      "value": 10
                  }
              ]
          },
          {
              "title": "Jun2017",
              "content": [
                  {
                      "label": "payable",
                      "value": 120
                  }
              ]
          }
      ];
      constructor() { }
  
      ngOnInit() {
      }
  
  }
  </code></pre>
  
  <p>I am passing the local reference from the parent component to the child component. When I am consoling the native element of this local reference it is 'undefined'. How can I access the native element so that I can access the style width and height of the component div.</p>