angular - How to open multiple dialog box in angular4 -

i working on angular4 project need open dialog boxes 1 after another. using material integrate dialog boxes. right single dialog box working want second dialog box while first 1 still open , if close second 1 should see first one.

i have done dialog box using article:- https://medium.com/@tarik.nzl/making-use-of-dialogs-in-material-2-mddialog-7533d27df41

is there guideline or method this. appreciable.

app.component.html:-

<button (click)="dialogbox()"> open first dialog box </button> 

app.component.ts:-

import { component, oninit} '@angular/core'; import { popupservice } './popup.service';  @component({    selector: 'app',    templateurl: './app.component.html',    styleurls: ['./app.component.scss'], }) export class appcomponent implements oninit {     popupresponse:any;    constructor( private popupservice : popupservice)    {}     ngoninit() {}     public dialogbox()    {       this.popupservice.dialog().          subscribe(res => {this.popupresponse = res},                    err => console.log(err),                    ()  => console.log(this.popupresponse)                   );    }  } 

popup.service.ts:-

import { injectable } '@angular/core'; import { http} '@angular/http'; import 'rxjs/add/operator/map'; import { mddialogref, mddialog, mddialogconfig } '@angular/material'; import { popupcomponent } './popup.component';  @injectable() export class popupservice {     constructor(private http: http, private dialog: mddialog) { }     dialog()    {       let dialogopen: mddialogref<popupcomponent>;       dialogopen = this.dialog.open(popupcomponent);        return dialogopen.afterclosed();    } } 

popup.component.ts:-

import { component, oninit} '@angular/core'; import { mddialogref } '@angular/material';  @component({   selector: 'popup',   templateurl: './popup.component.html',   styleurls: ['./popup.component.scss'] }) export class popupcomponent implements oninit {    constructor(public dialogref: mddialogref<teammemberspopupcomponent>)    {}     ngoninit() {}     seconddialogbox() {     } } 

popup.component.html:-

<div>    <div>       <span class="material-icons" (click)="dialogref.close()">clear</span>    </div>    <div>       <h2> popup </h2>       <button (click)="seconddialogbox()"> second dialog box </button>    </div> </div> 

how open second dialog box first dialog box not close.

i tried plunker, if move open dialog box 2 inside first dialog box body, working.... or i'm missing something

<div class="col-md-6 col-md-offset-3">     <h1>home</h1>     <p>{{bodytext}}</p>     <button (click)="openmodal('custom-modal-1')">open modal 1</button>  </div>  <modal id="custom-modal-1">     <div class="modal">         <div class="modal-body">             <h1>a custom modal!</h1>             <p>                 home page text: <input type="text" [(ngmodel)]="bodytext" />             </p>             <button (click)="openmodal('custom-modal-2')">open modal 2</button>             <button (click)="closemodal('custom-modal-1');">close</button>         </div>     </div>     <div class="modal-background"></div> </modal>  <modal id="custom-modal-2">     <div class="modal">         <div class="modal-body" style="height:80px; background-color: red;">             <h1>a tall custom modal!</h1>             <button (click)="closemodal('custom-modal-2');">close</button>         </div>     </div>     <div class="modal-background"></div> </modal>