Soy nuevo en angular, en mi aplicación tengo un diálogo mat en el que tengo dos formas, a saber, Iniciar sesión y Registrarse.

Una vez que abro el cuadro de diálogo la primera vez que el enfoque automático se establece en el campo de nombre de usuario, el problema es cuando navego al formulario de registro al hacer clic en el botón El primer nombre del formulario no se enfoca automáticamente, de la misma manera navega desde el registro para iniciar sesión en el campo de nombre de usuario. ahora no se enfoca automáticamente.

He intentado algunas soluciones de stackoverflow pero nada está resuelto mi problema.

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>

Alguien puede ayudarme a resolver esto