Angular: return value from dialog

user_19306027 0
Viewed 145

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 class="form-group">
        <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 class="form-group">
        <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" class="btn btn-success btn-lg btn-block" [mat-dialog-close]="myMessage">Send</button>
</div>
angular dialog
2 Answers

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

user_23161290

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 class="form-group">
        <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
      }
    });
}
user_85545780
Related