Angular

Angular - Form Focus

To have the system automatically focus on the first control, you need to do something like this 

1
import { Component,  ViewChild, Input, ElementRef, Inject} from '@angular/core';

Declare the following class level statement

1
@viewChild(“txtId”) txtId: ElementRef;

Used in 

1
2
3
ngAfterViewInit() {
  this.txtId.nativeElement.focus();
}

HTML file will have the #txtSubject

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mat-form-field class="full-width">
  <input 
    matInput 
    type='text' 
    #txtSubject
    autofocus="true" 
    placeholder="Subject" 
    formControlName="subject" 
    >
  <mat-hint>
     A title that would appear on a list.
  </mat-hint>
  <mat-error *ngIf="errorFormData?.Subject">
     {{errorFormData?.Subject}}
  </mat-error>
</mat-form-field>