title: Set focus to an element
body: <p>I have an <code>async</code> HTTP call and want to set a focus to an error element in a template if the <code>async</code> call results in an error.</p>
  
  <ul>
  <li>One way can be to inject the <code>ElementRef</code> and then use jQuery to access element and call <code>focus()</code> method on it.</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class MyComponent {
     
      constructor(private element: ElementRef) {}
  
      doAsync() {
          // do something async
  
          $(this.element.nativeElement).find('.error').focus();
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>Another way may be to create a directive, that binds to a property on model and calls <code>focus()</code> method on a host element.</li>
  </ul>
  
  <p>How good is to include/use JQuery in angular 2?</p>
  
  <p>Also, I believe the way Angular is meant to work (MV*) is to '<strong>modify model to which view reacts</strong>'. So, which one is correct way to do it?</p>