Md-dialog close after notification

I have dialog box where user can enter data and after clicking on "create", my dialog box gets close and user gets notification. I want to close my dialog box after user get notification and if user enters wrong data, user should get notification for that too and dialog box should not get close.

Currently, everything is working properly but I want my dialog box should disappear after notification (toster service).

Can anyone help me with this thing so that my dialog box will stay till i get notification for success and also for error?

exhibit.component.ts (main component)

createExhibit(event: any) {
let context = this;
this.createDialogRef = this.dialog.open(CreateExhibitDialogComponent, { width: '45em', data: {} });
this.createDialogRef.afterClosed().subscribe(
(newExhibit: Exhibit) => {
if (newExhibit.latitude) { newExhibit.latitude = newExhibit.latitude.toString().replace(/,/g, '.'); }
if (newExhibit.longitude) { newExhibit.longitude = newExhibit.longitude.toString().replace(/,/g, '.'); }
if (newExhibit) {
this.exhibitService.createExhibit(newExhibit)
.then(
() => {
this.toasterService.pop('success', this.translate('exhibit saved'));
setTimeout(function () {
context.reloadList();
}, 1000);
}
).catch(
error => this.toasterService.pop('error', this.translate('Error while saving'), error)
);
}
this.createDialogRef = null;
}
);
}


createExhibit.component.ts

<h1 md-dialog-title>{{ 'create exhibit' | translate }}</h1>

<md-dialog-content>
<form id="new-exhibit-form">
<md-input-container>
<input mdInput placeholder="{{ 'name' | translate }}" [(ngModel)]="exhibit.name" name="name" required>
</md-input-container>
<md-input-container>
<textarea
mdInput
mdTextareaAutosize
#autosize="mdTextareaAutosize"
placeholder="{{ 'description' | translate }}"
[(ngModel)]="exhibit.description"
name="desc"></textarea>
</md-input-container>




search










{{ statusOption | translate }}




<agm-map (mapClick)="selectLocation($event)" [zoom]=15 [latitude]="lat" [longitude]="lng">
<agm-marker [iconUrl]="'../../../images/map-marker.png'" *ngIf="exhibit.longitude && exhibit.latitude" [latitude]="exhibit.latitude" [longitude]="exhibit.longitude"></agm-marker>
</agm-map>
</form>
</md-dialog-content>

<md-dialog-actions align="end">
<button md-dialog-close md-raised-button>
{{ 'cancel' | translate }}
<md-icon>cancel</md-icon>
</button>
<button md-raised-button [disabled]="!exhibit.isValid()" color="primary" (click)="dialogRef.close(exhibit)">
{{ 'create' | translate }}
<md-icon>add_circle</md-icon>
</button>
</md-dialog-actions>


how to do this?

Nomally, createDialogRef comes with a method close() or closeAll(). You need to manually call them in your case.
– windmaomao
May 31 at 14:29

createDialogRef

close()

closeAll()

@James..I am trying to do that but i am not understanding how should i close the dialog after notification received. and if i enter wrong data then my dialog should stay and i should get notification regarding wrong entries...
– Ruchir Naphade
Jun 1 at 9:06

1 Answer
1

As windmaomao stated you need to manulally call dialog close() method. Material Dialog component proivide Observable only from afterClose() or beforeClose() and these methods listen to data passed through close() method. The close() method closes the dialog ofcourse what is not our expectation. You need to implement your own communication system between component and dialog build with kind of Observable or EventEmitter.
I have prepared simplified solution of your problem. The trick is you can obtain reference to any field or method of your dialog component with 'componentInstance' getter.

import {Component, EventEmitter, OnInit} from '@angular/core';
import {MatDialogRef} from "@angular/material";

@Component({
selector: 'app-simple-dialog',
template: `<h2 mat-dialog-title>Entering some data</h2>
<mat-dialog-content>Is data OK?</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="actionNo()">No</button>
<button mat-button (click)="actionYes()">Yes</button>
</mat-dialog-actions>`,
styleUrls: ['./simple-dialog.component.css']
})
export class SimpleDialogComponent implements OnInit {

private _action: EventEmitter<boolean> = new EventEmitter<boolean>();
answer = this._action.asObservable();

constructor(public dialogRef: MatDialogRef<SimpleDialogComponent>) { }

actionYes() {
this._action.next(true);
}

actionNo() {
this._action.next(false);
}

closeDialog() {
this.dialogRef.close();
}

ngOnInit() {
}

}


And HTML template excerpt code to include in your main component:

<button (click)="openDialog()">Open Dialog</button>


The code of openDialog() method:

openDialog() {
let dialogRef = this.dialog.open(SimpleDialogComponent);
dialogRef.componentInstance.answer.subscribe( answer => {
console.log('Answer from Dialog: ' + answer);
switch(answer) {
case true:
console.log('Data is OK. Closing dialog');
//do some complicated stuff
dialogRef.componentInstance.closeDialog();
//can be simple: dialogRef.close();
break;
case false:
console.log('Data is not OK. Not closing dialog. Show some toaster');
break;
}
}
)
}


@Michal.S..Thanks a lot..
– Ruchir Naphade
Jun 29 at 11:15

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.