angular14 - Reference Mutation Issue Between this.rows and this.emailconfig - Stack Overflow

  rows: { email: string; count: number }[] = [{ email: '', count: 0 }];
  emailconfig:any = [];

openDomainMapping() {
  // Reset rows before opening the dialog
  // Logic to close the modal or template
  if (!this.emailconfig || this.emailconfig.length === 0) {
    this.rows = [{ email: '', count: 0 }];
  } else {
    this.rows = [...this.emailconfig]; // Restore last submitted data
  }
  console.log(this.emailconfig);
  this.dialogOpen = this.dialog.open(this.domainMapping, {
     width: 'max-content',
     hasBackdrop: false,
  });
}

submitForm(){
  let email = this.rows.every(item=>item.email.trim()=='' && item.count>0);
  const emailcount =      this.rows.reduce((initialvalue,item)=>initialvalue+item?.count,0);
  
  if(!email){
    if(this.rows[0].email!=''){
      if(emailcount==this.maxTotalmsgCount){
        // Convert key names to uppercase and ensure `count` is a number
         const rte = JSON.parse(JSON.stringify(this.rows));
         this.emailconfig= [...rte]
        thismon.OpenNotificationModal('success','Email added successfully!!!');
        this.dialog.closeAll(); // dialog closed after success
      } else {
        thismon.OpenNotificationModal('error', `The number of email configurations must match the total members.`);
      }
    }else {
      thismon.OpenNotificationModal('success','Email added successfully!!!');
      this.dialog.closeAll(); // dialog closed after success
    }
  }else {
    thismon.OpenNotificationModal('error', `Please select email`);
  }
}

<ng-template #domainCountTemplate>
  <div class="domain-config-container">
    <!-- Header -->
     <div class="d-flex domain-config-header justify-content-between align-items-center">      
        <!-- Fixed Add Button -->
        <button (click)="addRow()" class="domain-config-add-btn">
          Add
        </button>
        <div class="">
          <h2>Send From</h2>
        </div>
        <div class="">
          <div>Total Member: {{maxTotalmsgCount}}</div>
        </div>
     </div>


    <!-- Dynamic Rows -->
    <div *ngFor="let row of rows; let i = index" class="domain-config-row">
      <!-- Domain Dropdown -->
       <input type="email" [(ngModel)]="row.email" name="email" class="domain-config-dropdown" placeholder="Enter Email">
      <!-- <select  class="domain-config-dropdown">
        <option value="" disabled selected>Select Email</option>
        <option *ngFor="let email of availableDomains" [value]="email">{{ email }}</option>
      </select> -->
      <!-- Count Input -->
      <input type="number" placeholder="Enter Count" [(ngModel)]="row.count" min="0" class="domain-config-count-input"  (keyup)="validateTotalCount(i)" />
      <!-- Remove Button -->
      <button (click)="removeRow(i)" class="domain-config-remove-btn" aria-label="Remove Row">
        ✕
      </button>
    </div>

    <!-- Submit Button -->
    <div class="domain-config-submit-container">
      <button (click)="closeTemplate()" class="domain-config-submit-btn">Close</button>
      <button (click)="submitForm()" class="domain-config-submit-btn" [disabled]="isDisabled">Submit</button>
    </div>

    <!-- Notes Section -->
    <div class="domain-config-notes-section">
      <p>Please select the sender email and the number of messages you want to send from that email.</p>
    </div>
  </div>
</ng-template>

When I change the email and count values without submitting, after closing the popup, they do not show the previous values when I reopen it. without submitting I need to show existing value not current value in popup.

The issue you're facing arises because when you assign this.rows back to this.emailconfig or when modifying this.rows, the reference to the data object (emailconfig) is still the same. So when you change this.rows, it affects this.emailconfig as they are pointing to the same memory location.