Angular: return value from dialog-CodePudding

I want to return a string from a dialog box and specifically the message variable to the main component but it does not work.

The console.log(res) command does not work at all.

What i am doing wrong?

Here is the code:

Main component TS code:

openSendMessageDialog(element: any){
    this.dialogService.openSendMessageDialog(element.buyer)
    .afterClosed().subscribe(res =>{
      if(res){
        console.log(res)  //Message
      }
    });
}

Dialog service TS code:

openSendMessageDialog(msg: any){
    return this.dialog.open(DialogMessageComponent,{
      width: '500PX',
      panelClass: 'confirm-dialog-container',
      disableClose: true,
      data :{
        message : msg
      }
    });

}

Dialog message TS code:

import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatConfirmDialogComponent } from '../mat-confirm-dialog/mat-confirm-dialog.component';

@Component({
  selector: 'app-dialog-message',
  templateUrl: './dialog-message.component.html',
  styleUrls: ['./dialog-message.component.css']
})
export class DialogMessageComponent implements OnInit {

  myMessage:string;
  username: string;  

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<MatConfirmDialogComponent>) { 
  }

  ngOnInit(): void {
    console.log(this.data)
    this.username = this.data.message
  }


}

Dialog Message HTML code:

<h1 mat-dialog-title>Send a message</h1>
<div mat-dialog-content>
    <!-- USER NAME -->
    <div >
        <mat-form-field appearance="outline">
            <mat-label>Reciepent username</mat-label>
            <input matInput [ngModel]="username" placeholder="Enter name" readonly>
        </mat-form-field>
    </div>
    <!-- MESSAGE -->
    <div >
        <mat-form-field appearance="outline">
            <mat-label>Message(Max. 100 chars limit)</mat-label>
            <textarea  matInput [maxLength]="100" [ngModel]="myMessage" placeholder="Enter message"></textarea>
        </mat-form-field>
    </div>

</div>
<div mat-dialog-actions>
    <button type="button"  [mat-dialog-close]="myMessage">Send</button>
</div>

CodePudding user response：

from documentation: https://material.angular.io/components/dialog/overview

in dialog component you need to call close method passing return data:

  closeDialog() {
    this.dialogRef.close('Pizza!');
  }

change [mat-dialog-close] to (click)="closeDialog()" which would call the above function and see if that works

CodePudding user response：

You do not instantiate and change value of myMessage so when you close dialog with myMessage variable it has falsy value

Try to use ngModle in this way [(ngModel)]

So your Html changes to:

.
.
   <!-- MESSAGE -->
    <div >
        <mat-form-field appearance="outline">
            <mat-label>Message(Max. 100 chars limit)</mat-label>
            <textarea  matInput [maxLength]="100" [(ngModel)]="myMessage" placeholder="Enter message"></textarea>
        </mat-form-field>
    </div>

And also try to console.log before any condition.

openSendMessageDialog(element: any){
    this.dialogService.openSendMessageDialog(element.buyer)
    .afterClosed().subscribe(res =>{
      console.log(res)
      if(res){
       // any logic
      }
    });
}