title: angular 2 focus element after router.navigate is not working
body: <p>On certain event I need to navigate to different route and focus one of the input filed. </p>
  
  <p>My Template</p>
  
  <pre><code>&lt;qualification&gt;
  
  &lt;address (updateAddress)="updateAddress($event);"&gt; 
  
  &lt;/address&gt;
  
  &lt;/qualification&gt;
  </code></pre>
  
  <p>In address component html one of the button </p>
  
  <pre><code>&lt;span class="filter-address" (click)="updateAddressClicked()"&gt;Update Address &lt;/span&gt;
  </code></pre>
  
  <p>In address component</p>
  
  <pre><code>@Output() updateAddress = new EventEmitter();
  updateAddressClicked($event){
       this.router.navigate(['/page/one'], {preserveQueryParams: true})
       this.updateAddress.emit(true);
  }
  </code></pre>
  
  <p>In qualification component I have defined <code>vc</code> as </p>
  
  <pre><code>@ViewChildren('inputone') vc;
  </code></pre>
  
  <p>html on qualificatioin  </p>
  
  <pre><code>&lt;input #inputone name="inputone"&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>updateAddress($event){
      this.vc.first.nativeElement.focus()
  }
  </code></pre>
  
  <p>When I am in /page/one route and navigate to /page/one route (i.e. itself) focus works. But if I am in different route lets say /page/two then when event triggers navigation to /page/one is fine but I get error which says</p>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): TypeError: Cannot read property
    'nativeElement' of undefined</p>
  </blockquote>
  
  <p>Any help is appreciated.</p>