Description:

I am working on an Angular project using ng-zorro-antd for modals. I need to dynamically update the footer of a modal after a certain delay (10 seconds). Initially, the modal should only have a “Cancel” button, and after 10 seconds, a “Regenerate OTP” button should be added to the footer.

Current Code:

Here’s the code I have so far:

import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';

export class SignupVerificationComponent {
  optModalRef!: NzModalRef;

  constructor(private modal: NzModalService) {}

  openOtpModal(id: number, isEmail: boolean): void {
    const modalTitle = isEmail ? 'Email OTP' : 'Phone Number OTP';
    this.optModalRef = this.modal.create({
      nzTitle: modalTitle,
      nzContent: OptComponent,
      nzFooter: [
        {
          label: 'Cancel',
          onClick: () => this.onCancelOtp(false, isEmail),
        }
      ],
      nzData: {
        isEmail: isEmail,
        userTempId: id,
        optModalRef: this.optModalRef,
      },
    });

    // Delay adding the "Regenerate OTP" button
    setTimeout(() => {
      if (this.optModalRef) {
        this.optModalRef.updateConfig({
          nzFooter: [
            {
              label: 'Cancel',
              onClick: () => this.onCancelOtp(false, isEmail),
            },
            {
              label: 'Regenerate OTP',
              onClick: () => this.generateOtp(isEmail),
            }
          ]
        });
      }
    }, 10000); // 10 seconds

    this.optModalRef.afterClose.subscribe((result) => {
      if (result) {
        if (isEmail) {
          this.isEmailVerified = true;
        } else {
          this.isPhoneNumberVerified = true;
        }
      }
    });
  }

  private generateOtp(isEmail: boolean): void {
    // Your OTP generation logic
  }

  private onCancelOtp(isRegenerate: boolean, isEmail: boolean): void {
    // Your cancel logic
  }
}

Problem:

The issue is that while the setTimeout function is executed after 10 seconds (as confirmed by the debugger), the modal’s footer does not get updated to include the “Regenerate OTP” button. The code hits the debugger statement inside setTimeout, but the footer remains unchanged.

What I’ve Tried:

• Ensured that this.optModalRef is still valid and hasn’t been closed before calling updateConfig.
• Logged the modal reference and confirmed it’s valid before attempting to update the footer.
• Checked for any errors in the console but found none.

Desired Outcome:

After 10 seconds, the footer should be updated to include the “Regenerate OTP” button alongside the “Cancel” button without closing and reopening the modal.

Question:

How can I dynamically update the nzFooter of an ng-zorro-antd modal after a delay in Angular? Is there a better way to achieve this, or am I missing something in my current approach?