title: How to set autofocus on a matInput element on click event in Angular 6?
body: <p>Similar to Google Login page, I want to have autofocus on input element after on click event. I have tried @ViewChild('id') and document.getElementId('id'). Both of it doesn't work. It's always null or undefined. How can I achieve this?</p>
  
  <pre><code>       &lt;mat-form-field class="example-full-width col-sm-4"&gt;
          &lt;input autofocus id="login-username" matInput 
         formControlName="userName" minlength="5" maxlength="20" 
         name="userName" placeholder="Username" required #input&gt; 
        &lt;/mat-form-field&gt;
  
          &lt;div class="col-sm-12"&gt;
             &lt;button (click)="changeView()" type="button" mat-raised-
               button color="primary"&gt;Next&lt;/button&gt;
            &lt;/div&gt;
  
           &lt;mat-form-field class="example-full-width col-sm-4" 
            #passwordInput&gt;
          &lt;input autofocus type="password" matInput 
         placeholder="Password" minlength="5" maxlength="20" 
         formControlName="userPassword" #passwordInput&gt;  
        &lt;/mat-form-field&gt;
  </code></pre>