CODEWITHSUNDEEP
angularangular-material
jengfad
jengfad

Reputation: 734

Angular 2 Material: Dynamic Custom Dialogs

I'm using Angular 2 Material's dialog component when displaying modals. I've created a base modal (MatModalComponent) that have ng-content and the customize child modals (ReserveSeatModalComponent) that will be included on the base's ng-content.

I'm trying to refactor my dialog calls into one service. So from having to write this everytime I want a dialog displayed:

        let dialogRef = this.dialog.open(ReserveSeatModalComponent, {  
            width: '250px',
            data: {
                seat: this.selectedSeat
            }
        });

I now want it to be called on an open() method inside a service. I'm not sure how will I implement this. I've began with Tarik's implementation but I'm blocked on how will I pass the child modal component to the service so it will be the one used by the dialogRef.

Upvotes: 1

Views: 2396

Answers (1)

jengfad
jengfad

Reputation: 734

Just got my code working for this.

Here is my modal service:

export class ModalService {

    constructor(private dialog: MatDialog) { }

    public invoke(modalComponent: any, modalData: any): Observable<any> {
        let dialogRef = this.dialog.open(modalComponent, {
            width: '250px',
            data: modalData
        });

        return dialogRef.afterClosed();
    }
}

I invoke the service like this:

    this.modalService
        .invoke(VacateSeatModalComponent,
        {
            selectedSeat: this.selectedSeat,
            seatingInfo: seatInfo
        })
        .subscribe(result => {
            if (result)
                this.vacateSeat();
        });

Upvotes: 2

Related Questions