Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

216
Views
How to communicate from angular-material2 dialog to its parent

I have Parent component that opens an angular-material2 dialog box.

let dialogRef = this.dialog.open(Child, {
            disableClose: true
        });

opened dialog Child component has a button 'Add'. I want to notify the `Parent' component if user click on 'Add' button.

How is this possible?

about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

I used EventEmitter to communicate back to parent container

    // dialog component
    ...
    onAdd = new EventEmitter();
    
    onButtonClick() {
      this.onAdd.emit();
    }
    ... 

and parent component

    // parent component
    ...
    let dialogRef = this.dialog.open(Component);
    const sub = dialogRef.componentInstance.onAdd.subscribe(() => {
      // do something
    });
    dialogRef.afterClosed().subscribe(() => {
      // unsubscribe onAdd
    });
    ...

Here is the demo

http://plnkr.co/edit/KbE3uQi2zMNaZlZEEG5Z

Thanks to thomaspink

about 4 years ago · Santiago Trujillo Report

0

Your Answer is correct but this thing is already mentioned in Angular2 Material Documentation in a simple way as you can subscribe to afterClosed method of dialog Reference (dialogRef as in the example) and you will get the selected option's value from subscribe method's argument (In our case result ).

let dialogRef = this.dialog.open(DialogResultExampleDialog);
dialogRef.afterClosed().subscribe(result => {
  this.selectedOption = result;
});

For more details, you can visit this link https://material.angular.io/components/component/dialog and go to Example Tab and try to understand simple example.

about 4 years ago · Santiago Trujillo Report

0

With "@angular/material": "~7.0.0" componentInstance no longer exist on MatBottomSheetRef.

It has been replace by instance

Parent implementation:

let dialogRef = this.dialog.open(Component);
const sub = dialogRef.instance.onAdd.subscribe(() => {
  // do something
});
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!