title: Why template local variables are not usable in templates when using *ngIf?
body: <h1>Part 1: "#test" is undefined when using *ngIf</h1>
  
  <p>When referencing an input that can be hidden/"destroyed" (because the <code>*ngIf</code> is used and some of the elements are destroyed), the local variable created by the hashtag syntax <code>#</code> (<code>#test</code> in the example below) does not work, even when the element exists in the page.</p>
  
  <p>The code was:</p>
  
  <pre><code>@Component({
      selector: 'my-app',
      template: `&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;
      &lt;button (click)="focusOther(test)"&gt;test&lt;/button&gt;
      &lt;input #test *ngIf="boolValue" &gt;
      `
  })
  export class AppComponent { 
  
    private isVisible = false;
  
    focusOther(testElement){
      this.isVisible = true;
      alert(testElement);
      testElement.focus();
    }
  
  }
  </code></pre>
  
  <p>The alert displays <code>undefined</code>, because nothing is passed to that function.</p>
  
  <p>Is there a solution to make it work?
  My goal is to focus an element that will be created.</p>
  
  <p><strong><em>Solution given by Mark Rajcok:</em></strong> make a directive with an afterViewInit that uses elementRef and calls .focus() on the element.</p>
  
  <p>See this plunker for a working version of part 1:
  <a href="http://plnkr.co/edit/JmBBHMo1hXLe4jrbpVdv?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/JmBBHMo1hXLe4jrbpVdv?p=preview</a></p>
  
  <h1>Part 2 how to re-focus that element after initial creation</h1>
  
  <p>Once this problem of "focus after creation" is fixed, I need a way to re-focus() a component, like in "test.focus()" (where #test is the local variable name for the input, but cannot be used like that as I demonstrated before).</p>
  
  <p><strong><em>Multiple solutions given by Mark Rajcok</em></strong></p>