Как удалить форму при изменении индекса Mat-stepper

Question

Я использую этот Stackblitz пример для динамического создания форм в mat-stepper. У меня есть 3 степпера Личные данные, адрес и контакт. Однако, когда я открываю форму адреса и затем переключаюсь на контакт, я хочу, чтобы форма адреса исчезла. Ниже мой код. Может ли кто-нибудь помочь мне указать на мою ошибку?

Код для мат-степпера в HTML

  <mat-step label="Personal Details" state="chat">
      <div class="col-sm-offset-10">
          <button mat-icon-button color="primary" matTooltip="Create New Form" (click)="addPersonalDetails()">
            <mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
          </button>
        </div>
    <div>
      <hr />
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
<mat-step label="Address" state="chat">
      <div class="col-sm-offset-10">
          <button mat-icon-button color="primary" matTooltip="Create New AddressForm" (click)="addAddress()">
            <mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
          </button>
        </div>
    <div>
      <hr />
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
<mat-step label="Contact" state="chat">
      <div class="col-sm-offset-10">
          <button mat-icon-button color="primary" matTooltip="Create New Contact Form" (click)="addContact()">
            <mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
          </button>
        </div>
    <div>
      <hr />
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

Машинописный код

  addPersonalDetails() {
  this.service.setRootViewContainerRef(this.viewContainerRef);
 this.service.addDynamicPersonalComponent();
  }
  addAddress() {
this.service.setRootViewContainerRef(this.viewContainerRef);
this.service.addDynamicAddressComponent();
}
addContact() {
this.service.setRootViewContainerRef(this.viewContainerRef);
this.service.addDynamicContactComponent();
}

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

В настоящее время так выглядит страница в моем приложении.

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