How to remove form when Mat-stepper index changes - html

Question

I am using this Stackblitz example to dynamically create forms in mat-stepper.
I have 3 steppers Personal Details, Address and Contact.
However, when I open the Address form and then switch to contact I want the address form to disappear.
Below is my code. Can someone help me to point out my mistake?
Code for Mat-stepper in 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>
Typescript Code
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();
}
The Typescript code calls the address, Personal Details, and other components.
Now if I click on add form button for address and then switch to contact stepper I want to hide the address form and display the contact form.
Currently, the address from stays there and the contact form is displayed below it.
Currently this is how the page looks in my app
If I change tabs I should be able to hide and show forms seperately for each stepper option.