Mat Dialog result ""

Question

Once i input the number and select the add, It will pop-up the dialog and input any animals. but once i submit it, i got the result is "" , but once i push the animals with this code this.data.totalCount it works. can someone help me and tried to fix it.

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface DialogData {
  totalCount: number;
  name: string;
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {

  animals: string[];
  totalCount: number;
  busy = false;

  constructor(public dialog: MatDialog) { }

  openDialog(): void {
    this.busy = true;
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { totalCount: this.totalCount || 1 }
    });

    dialogRef.afterOpened().subscribe(result => {
      this.busy = false;
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animals = result;
      console.log(result)
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {
  animals: any[] = [];
  getTotalCountVal = null;
  start: number = 0;
  end: number = 20;
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  ngOnInit() {
    this.getTotalCountVal = this.data.totalCount;

    if (this.getTotalCountVal) {
      for (let i = 0; i < this.data.totalCount; i++) {
        this.animals.push('');
      }

    }
  }


  onNoClick(): void {
    this.dialogRef.close(this.animals);
  }

}

https://stackblitz.com/edit/angular-d6nfhr-b2euxy

Answer 1

the problem is you are storing results in string[], strings are immutable so every time(in for loop) you change it's instance would not be the same as in string[].

Instead create an interface

export interface Animal {
  name: string;
}

export interface DialogData {
  totalCount: number;
  name: string;
}

export interface Animal {
  name: string;
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {

  animals: Animal[];
  totalCount: number;
  busy = false;

  constructor(public dialog: MatDialog) { }

  openDialog(): void {
    this.busy = true;
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { totalCount: this.totalCount || 1 }
    });

    dialogRef.afterOpened().subscribe(result => {
      this.busy = false;
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animals = result;
      console.log(result)
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {
  animals: any[] = [];
  getTotalCountVal = null;
  start: number = 0;
  end: number = 20;
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  ngOnInit() {
    this.getTotalCountVal = this.data.totalCount;

    if (this.getTotalCountVal) {
      for (let i = 0; i < this.data.totalCount; i++) {
        this.animals.push({name: ''});
      }

    }
  }

  loadMore() {
    if(this.end < this.getTotalCountVal) {
      this.end += 20;
    }
  }

  onNoClick(): void {
    this.dialogRef.close(this.animals);
  }

}

<h1 mat-dialog-title>Total - {{data.totalCount}}</h1>
<div mat-dialog-content>
    <p>Add favorite animals</p>
    <ng-container *ngFor="let animal of animals | slice: start: end; let index=index">
        <mat-form-field>
            <input matInput [(ngModel)]="animal.name" name ="animal">
      </mat-form-field>
      </ng-container>
    <button *ngIf="end < animals.length" mat-raised-button color="primary" (click)="loadMore()">Add more animals</button>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="animals" cdkFocusInitial>Ok</button>
</div>

<ol>
  <li>
    <mat-form-field>
      <input matInput [(ngModel)]="totalCount" placeholder="How many animals you want to add?">
    </mat-form-field>
  </li>
  <li>
    <button mat-raised-button (click)="openDialog()">Add</button>
    <ng-container *ngIf="busy">
      Dialog opening...
    </ng-container>
  </li>
</ol>
<ng-container *ngIf="animals">
   <ng-container *ngFor="let animals of animals">
    <li>You Added: <i>{{animals.name}}</i></li>
   </ng-container>
  </ng-container>

Now when you change name of animal its instance would be same animal only name will change.

Hope this help: Updated stackblitz