title: Angular Material set initial focus on form control without click event
body: <p>I am using Angular 9 and Material.  I have a Stepper that will guide users through the steps to do our workflow.</p>
  <p>I need for the users to be able to go through the steps entirely using the keyboard, without clicking in the control.  I have seen many examples for setting focus on a control via a click event.  I don't want the users to have to click a button to set focus on the first text area.  <strong>How can I get initial focus on the text area without the user having to click anything when the stepper is initialized?</strong>  I have tried using the element ref in the ngAfterViewInit, but it doesn't work.  Can anyone help me understand how to do this?  Thanks.</p>
  <p>Here is my HTML:</p>
  <pre><code>&lt;pseudo-common-tool-header title=&quot;{{this.title}}&quot;&gt;&lt;/pseudo-common-tool-header&gt;
  &lt;div class=&quot;pseudo-content-manager-tool-area&quot;&gt;
  &lt;mat-horizontal-stepper #stepper&gt;
  &lt;mat-step [stepControl]=&quot;formGroup&quot;&gt;
      &lt;form [formGroup]=&quot;formGroup&quot;&gt;
          &lt;ng-template matStepLabel&gt;Workstation Ids&lt;/ng-template&gt;
          &lt;div&gt;
              &lt;mat-form-field appearance=&quot;outline&quot; class=&quot;eris-width-45&quot; &gt;
              &lt;mat-label&gt;List of Old/New Workstations to swap (one pair per line)&lt;/mat-label&gt;
              &lt;textarea #wkstns rows=&quot;8&quot; #workstations matInput placeholder=&quot;Old Workstation, New Workstation&quot; formControlName=&quot;workstations&quot; required&gt;&lt;/textarea&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;mat-form-field appearance=&quot;outline&quot; &gt;
                  &lt;mat-label&gt;Soft Delete Date&lt;/mat-label&gt;
                  &lt;input matInput #softDate [min]=&quot;minDate&quot; [matDatepicker]=&quot;picker3&quot; formControlName=&quot;removalDate&quot;&gt;
                          &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker3&quot;&gt;&lt;/mat-datepicker-toggle&gt;
                          &lt;mat-datepicker #picker3 color=&quot;primary&quot;&gt;&lt;/mat-datepicker&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;button color=&quot;primary&quot; #step1next mat-raised-button matStepperNext&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/mat-step&gt;
  &lt;mat-step  label=&quot;Validate&quot;&gt;
      &lt;div&gt;
          &lt;button mat-raised-button color=&quot;secondary&quot; matStepperPrevious&gt;Back&lt;/button&gt;
          &lt;button mat-raised-button color=&quot;secondary&quot; matStepperNext&gt;Next&lt;/button&gt;
        &lt;/div&gt;
  &lt;/mat-step&gt;
  &lt;mat-step&gt;
      &lt;ng-template matStepLabel&gt;Epic Build&lt;/ng-template&gt;
  &lt;/mat-step&gt;
  </code></pre>
     
     
  <p>Here is my Component:</p>
  <pre><code>@Component({
   templateUrl: './swap-workstations.component.html',
   styleUrls: ['./swap-workstations.component.scss']
    })
  
   @PseudoTool({
   title: 'Check Workstation Existence in Epic',
   componentName: 'CheckWorkstationExistenceInEpicComponent'
    })
  
    export class SwapWorkstationsComponent extends BasePseudoTool implements OnInit {
         formGroup: FormGroup;
      // minimum date for date picker
      minDate: Date;
   @ViewChild('wkstns') wkstns: ElementRef;
   @ViewChild('softDate') softDate: ElementRef;
   @ViewChild('step1next') step1next: ElementRef;
  
   constructor(private formBuilder: FormBuilder) {
       super();
      }
  
   ngOnInit(): void {
     this.formGroup = this.formBuilder.group({
       workstations: ['', Validators.required],
       removalDate: ['', Validators.required]
     });
  
  // Set minimum date for date pickers.
  this.minDate = new Date();
   }
  
   ngViewAfterInit(): void {
     this.wkstns.nativeElement.focus();
   }   
  </code></pre>
  <p>}</p>