title: how to access Native HTML Input element using formControl in Angular 2.0
body: <p>I'm using Angular 2.0 final release. </p>
  
  <p><strong>What i want to do?</strong>
  - i want to show some notifications (warnings, the requirements for the input) only when the input receive focus. Or even better, when his parent (<code>the div</code>) has <code>mouse hover</code> event.</p>
  
  <p>Doing this from the parent(the div) is easy. Just (focus)=showNotifications() + an ngIf - and the job is done.</p>
  
  <p><strong>But i want to encapsulate this functionality inside the show-notifications component - and make it reusable..</strong> </p>
  
  <p>Given that i pass <code>the control</code> inside the show-notifications using <code>@Input()</code> - i could do both this things if i have access to the <code>native HTML input element</code>.You can see how in <code>show-notifications.component.ts</code>. Here is the code:</p>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>`&lt;div&gt;
     &lt;label&gt;Name: &lt;/label&gt;
     &lt;input formControlName="myName"&gt;
     &lt;show-notifications [the_control]="myName" &gt;&lt;/show-notifications&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p><strong>app.component.ts:</strong></p>
  
  <pre><code>export class AppComponent {
      myName = new FormControl("defaultvalue",[some validators..])
  }
  </code></pre>
  
  <p><strong>show-notifications.component.html:</strong></p>
  
  <pre><code>&lt;div class="show_requirements" *ngIf="hasfocus or parentDivHasMouseHover"&gt; // incorect code and logic - i know, but you can see the idea..
  
      &lt;p *ngFor="let requirement of thisInputRequirements"&gt;{{requirement}}&lt;p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>show-notifications.component.ts:</strong></p>
  
  <pre><code>export class ShowNotificationsComponent {
  
      @Input() the_control;
      this.thisInputRequirements = // take them form firebase.
      this.thisInputCustomErrorMessages = // take them from firebase.
  
      // I implemented all this and works amazing but i want to do:
  
      //something like this:
  
      ngOnInit(){
          this.nativeInputElement = this.the_control.getNativeElement() // this of course doesn't work
  
          // the requirements are shown only when the input receive focus
          let source = Rx.DOM.focus(this.nativeInputElement);
          source.subscribe( x =&gt; this.hasFocus = true)
  
          // Or even better: 
          // the requirements are shown only when the parent has mouse hover
          // or any other event / endles posibilites here..
  
          let parent = getParentOf(this.nativeInputElement)
          let source = Rx.DOM.mouseover(parent);
          source.subscribe( x =&gt; this.parentDivHasMouseHover = true) // this will be some toggling functionality.
      }
  
  }
  </code></pre>
  
  <p><strong>Question:</strong></p>
  
  <p><strong><em>How do i access the native element given that i have the formControl (myName = the_control)  object?</em></strong> </p>
  
  <p>Is there a better way to do notifications in a separate component - and make it reusable? I already use this successfully throughout my entire app - to show errors and input requirements..</p>
  
  <p>Note: I tried to pass the hole html input first using hashtag syntax ( #myInput ) and form there, inside the show-notifications component, i tried to do: myInput.myName - to acces the control but i get undefined. The controls are not present on the native input element. And I need that control for validation:)</p>