Как изменить угловые компоненты во время выполнения в корневом компоненте

Question

Я хочу добавить динамическую форму. При нажатии кнопки конфигурации форма должна измениться с app-login-form на login-config-form.

app.component.html

<div class="container p-5">
  <app-login-header></app-login-header>
  <div class="load-form">
    <login-config-form></login-config-form> 
    <app-login-form></app-login-form>
  </div>
</div>

app.component.ts

import {
  Component,
} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

}

Answer 1

Не могли бы вы попробовать это:

<div class="container p-5">
  <app-login-header></app-login-header>
  <div class="load-form">
    <button (click)="displayConfig = !displayConfig">Toggle</button>

    <!-- If is displayConfig then show login-config -->
    <ng-container *ngIf="displayConfig; else isLoginForm;">
      <login-config-form></login-config-form>
    </ng-container>

    <!-- else show isLoginForm -->
    <ng-template #isLoginForm>
      <app-login-form></app-login-form>
    </ng-template>


  </div>
</div>

Answer 2

Что-то вроде

<div class="container p-5">
  <app-login-header></app-login-header>
  <div class="load-form">
    <button (click)="displayConfig = !displayConfig">Toggle</button>
    <login-config-form *ngIf="displayConfig"></login-config-form> 
    <app-login-form> *ngIf="!displayConfig"</app-login-form>
  </div>
</div>

TS:

//...
export class AppComponent {
   public displayConfig: boolean;
}