Eu sou novo no angular. No meu aplicativo, tenho uma caixa de diálogo em que tenho duas formas: Login e SignUp.

Depois de abrir a caixa de diálogo pela primeira vez, o foco automático é definido no nome do usuário field.problem quando navego para o formulário Inscrição no botão, clique no campo Nome do formulário que não é mais focado automaticamente, da mesma maneira que navegar desde a inscrição para acessar o campo nome do usuário agora não fique focado automaticamente.

Eu tentei algumas soluções de stackoverflow, mas nada foi resolvido meu 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>

alguém pode me ajudar a resolver isso.