How to manually set focus on mat-form-field in Angular 6

Question

I am new to angular ,In my application I have a mat-dialog in which I have two forms namely Login and SignUp.

Once I open the dialog first time the auto focus is set on username field.problem is when I navigate to SignUp form on button click that form's FIrst Name field not get auto focused ,the same way navigate from signup to login the username field is now not get auto focused.

I have tried to some stackoverflow solutions but nothing is resolved my issue.

popupScreen.component.html

<form class="login" *ngIf="isLoginHide">     <mat-form-field>         <input matInput placeholder="username">     </mat-form-field>     <mat-form-field>         <input matInput placeholder="password">     </mat-form-field>      <button mat-button color="primary">Login</button>     <button mat-button (click)="hideLogin($event)" color="accent">SignUp</button> </form>  <form class="SignUp" *ngIf="isSignUpHide">     <mat-form-field>         <input matInput placeholder="First Name">     </mat-form-field>     <mat-form-field>         <input matInput placeholder="Last Name">     </mat-form-field>     <mat-form-field>         <input matInput placeholder="username">     </mat-form-field>     <mat-form-field>         <input matInput placeholder="password">     </mat-form-field>      <button mat-button (click)="hideSignUp($event)" color="primary">Login</button>     <button mat-button color="accent">SignUp</button> </form> 

can anyone help me to solve this .

Answer 1

Kindly use cdkFocusInitial attribute in input field where you want to focus.

<mat-form-field>     <input matInput placeholder="username" #usernameInput cdkFocusInitial> </mat-form-field>