title: How to get reference of the component associated with ElementRef in Angular 2
body: <p>I have this component in my template:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;vector-editor  #scaleControl
                  [x]="scaleX"
                  [y]="scaleY"
                  [z]="scaleZ" &gt;               
  &lt;/vector-editor&gt;
  </code></pre>
  
  <p>The <code>vector-editor</code> has the following structure:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>export class VerticeControlComponent implements OnInit
  {
      @Input() x: number;
      @Input() y: number;
      @Input() z: number;
  
      ...
  }
  </code></pre>
  
  <p>In my application I grab a reference to the <code>#scaleControl</code> using </p>
  
  <pre class="lang-typescript prettyprint-override"><code>@ViewChild('scaleControl') scaleControl: ElementRef;
  </code></pre>
  
  <p>Now if I output <code>scaleControl</code> to the console I get this result:</p>
  
  <p><a href="https://i.stack.imgur.com/wwpVb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wwpVb.png" alt="enter image description here"></a></p>
  
  <p>As can be seen, the reference is not null and all the properties of my component are there. I want to access those properties, but in code the actual type of the <code>scaleControl</code> is <code>ElementRef</code> and not <code>VectorEditorControl</code> as seen in the output. Because of this, TypeScript doesn't me allow to use <code>this.scaleControl.x</code>.</p>
  
  <p>I also tried to cast <code>ElementRef</code> like this </p>
  
  <pre class="lang-typescript prettyprint-override"><code>var temp = &lt;VectorEditorControl&gt;this.scaleControl
  </code></pre>
  
  <p>but I get an error telling me that I cannot cast <code>ElementRef</code> to <code>VectorEditorControl</code></p>
  
  <p>In the end, I tried to access <code>this.scaleControl.nativeElement</code> but it's undefined...</p>
  
  <p>What am I missing here?</p>