ичок в angular, в моем приложении у меня есть mat-диалог, в котором у меня есть две формы, а именно Login и SignUp.

Как только я открываю диалоговое окно в первый раз, когда автофокус устанавливается на поле имени пользователя. Проблема заключается в том, что при переходе к форме регистрации по нажатию кнопки, поле первого имени формы не фокусируется автоматически, аналогичным образом переходите от регистрации к входу в поле имени пользователя. не сфокусироваться на авто

Я пробовал некоторые решения для работы со стеком, но моя проблема не решена.

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>

может кто-нибудь помочь мне решить это.