I am trying to create an NG-Zorro modal so that it has more steps. When updating, only nzFooter is updated, but no longer nzTitle or nzContent.

I don’t understand what could be wrong if it works for me in one part and not in the other.

**My TypeScript:**

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NzModalService, NzModalRef  } from 'ng-zorro-antd/modal';

@Component({
  selector: 'test-component',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class InventoryItemsListItemDetailComponent {

@ViewChild('modalContent1', { static: true }) modalFooterStep1: TemplateRef<{}>;
@ViewChild('modalContent2', { static: true }) modalFooterStep2: TemplateRef<{}>;
@ViewChild('modalFooterStep1', { static: true }) modalFooterStep1: TemplateRef<{}>;
@ViewChild('modalFooterStep2', { static: true }) modalFooterStep2: TemplateRef<{}>;

currentStep = 1;
  modalRef: NzModalRef;

constructor(private modal: NzModalService) {}

showModal(title: TemplateRef<{}>, content: TemplateRef<{}>, footer: TemplateRef<{}>): void {
    this.modalRef = this.modal.create({
      nzTitle: title,
      nzContent: content,
      nzFooter: footer,
    });
  }

  nextStep(): void {
    this.currentStep = 2;
    this.modalRef.updateConfig({
      nzContent: this.modalContent2,
      nzFooter: this.modalFooterStep2,
    });
  }

  prevStep(): void {
    this.currentStep = 1;
    this.modalRef.updateConfig({
      nzContent: this.modalContent1,
      nzFooter: this.modalFooterStep1,
    })
  }

  handleOk(): void {
    this.isConfirmLoading = true;
    setTimeout(() => {
      this.isConfirmLoading = false;
      this.modalRef.close();
      this.updateComponent();
    }, 2000);
  }
}

Here I have button and my modals.

**My HTML:**

<button (click)="showModal(modalTitle, modalContent1, modalFooterStep1)"></button>

<ng-template #modalTitle>Test Title</ng-template>

<ng-template #modalContent1>
  <p>Step 1 Content</p>
</ng-template>

<ng-template #modalContent2>
  <p>Step 2 Content</p>
</ng-template>

<ng-template #modalFooterStep1>
  <button nz-button nzType="primary" (click)="nextStep()">Next</button>
</ng-template>

<ng-template #modalFooterStep2>
  <button nz-button nzType="default" (click)="prevStep()">Back</button>
  <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Submit</button>
</ng-template>

I would like to update the nzContent to the current state when I click next.