title: How to get `DOM Element` in Angular 2?
body: <p>I have a component that has a <code>&lt;p&gt;</code> element. It's <code>(click)</code> event will change it into a <code>&lt;textarea&gt;</code>. So, the user can edit the data. My question is:</p>
  <ul>
  <li>How can I make the focus on the <code>textarea</code>?</li>
  <li>How can I get the element, so I can apply the <code>.focus()</code> on it?</li>
  <li>Can I avoid using <code>document.getElemenntById()</code>?</li>
  </ul>
  <p>I have tried to use the &quot;ElementRef&quot; and the &quot;@ViewChild()&quot; however it seems that I'm missing something:</p>
  <p><strong>app.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>@ViewChild('tasknoteId') taskNoteRef:ElementRef;
  
  noteEditMode: boolean = false;
  
  get isShowNote (){
    return  !this.noteEditMode &amp;&amp; this.todo.note  ? true : false;
  }
  taskNote: string;
  toggleNoteEditMode () {
    this.noteEditMode = !this.noteEditMode; 
    this.renderer.invokeElementMethod(
      this.taskNoteRef.nativeElement,'focus'
    );
  }
  </code></pre>
  <p><strong>app.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;span class=&quot;the-insert&quot;&gt;
    &lt;form [hidden]=&quot;!noteEditMode &amp;&amp; todo.note&quot;&gt;
      &lt;textarea #tasknoteId id=&quot;tasknote&quot;
       name=&quot;tasknote&quot;
       [(ngModel)]=&quot;todo.note&quot;
       placeholder=&quot;{{ notePlaceholder }}&quot;
       style=&quot;background-color:pink&quot;
       (blur)=&quot;updateNote()&quot; (click)=&quot;toggleNoteEditMode()&quot;
       [autofocus]=&quot;noteEditMode&quot;
       [innerHTML]=&quot;todo.note&quot;&gt;
     &lt;/textarea&gt;
   &lt;/form&gt;
  &lt;/span&gt;
  </code></pre>