Close md-dialog inside it's component.ts

Question

I have a md-dialog component - DialogComponent - which i open from sibling component - SiblingComponent - and i want to close it in dialog.component.ts after some actions.

DialogComponent basically is a form with submit button, submitting form takes me to dialog.component.ts function where i'm doing some validation and sending data to service.

After validation passes and data is sent i want to make some timeout and then automatically close dial window, but i dont know how to run something like md-dialog-close in dialog.component.ts

score 16 · Accepted Answer · edited Apr 13 '18 at 08:48

16

You can inject an MdDialogRef into the dialog component class, and use that to close it. Example:

export class DialogComponent {

    constructor(private dialogRef: MdDialogRef<DialogComponent >) { }

    someAction() {
        // do your thing here
        this.dialogRef.close(); // <- this closes the dialog. 
        // You can also wrap it in setTimeout() if you want
    }
}

edited Apr 13 '18 at 08:48

Amirhossein Mehrvarzi

18,024
7
45
70

answered Aug 24 '17 at 12:52

Andrei Matracaru

3,511
1
25
29

he's trying to reach his dialogRef from different components – Carsten Aug 24 '17 at 12:54
actualy no, i'm trying to reach dialogRef from DialogComponent :) – esquarial Aug 24 '17 at 12:55
That's the answer, than you so much – esquarial Aug 24 '17 at 13:00

score 0 · Answer 2 · answered May 04 '20 at 01:40

I arrived here looking for a similar situation but for MatDialog

My scenario is that I had a MatDialog that contains and EditParkingDialogComponent that contains a ParkingFormComponent, why so complicated ? because I am reusing the ParkingFormComponent to be used as a form or into a dialog.

What I needed was to close the main MatDialog when a Parkin was updated in the ParkingFormComponent, example when the data was saved.

Here is what I did:

In the ParkingFormComponent.component.ts I emit an event when the parking is updated

  @Output()
  parkingUpdated: EventEmitter<any> = new EventEmitter<any>();

  updateParking() {
    .....
    this.parkingUpdated.emit();
  }

In the EditParkingDialogComponent.component.ts (intermediate component)

  constructor(private dialogRef: MatDialog) { }

  onParkingUpdated() {
      this.dialogRef.closeAll();
  }

In the EditParkingDialogComponent.component.html

<app-parking-form [mode]="formMode" [parkingModel]="currentParking" (parkingUpdated)="onParkingUpdated()"></app-parking-form>

score -2 · Answer 3 · answered Aug 24 '17 at 12:51

You need to get a reference to the component you want to access by using @ViewChild(MyComponent) myComponent; in the parent.

From 1 sibling you need to emit an event to the parent by using @Output() event = new EventEmitter(); and then in the parent you can access the other sibling by using it's reference.

(you don't need an @Output(), you can also create two references in the parent @ViewChild(SiblingOneComponent) & @ViewChild(SiblingTwoComponent) and a variable in the child component: parentComponent: ParentComponent. and set it (in the parent) by using SiblingOneComponent.parentComponent = this;

I don't think that's what the OP is asking. He simply wants to close the dialog instance from within his dialog component class. — Andrei Matracaru, Aug 24 '17 at 12:54

Close md-dialog inside it's component.ts

3 Answers3