Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

220
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda