Opening dialog from another dialog with Angular Material and Safari

Question

Please take a look at the following app:

https://stackblitz.com/edit/angular-1qxhep

I'm trying to open a dialog from within another dialog. The shared example works fine in Chrome but it doesn't work in Safari.

If you check the two console.log() statements in safari the result looks different:

Safari

First dialog info:

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

Second dialog info:

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

Chrome

First dialog info:

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

Second dialog info:

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog2", disableClose: false, _afterOpen: Subject, …}

Notice that for Chrome the 'id' parameter passed to the dialogs is properly picked up, for Safari I don't get the same behaviour and therefore Safari does not open the second dialog panel.

Answer 1

That's because since Safari has no native support for the Web Animations API, you have to install web-animations-js. The GIF below shows you how to install a dependency on Stackblitz:

Sorry if the quality if a bit blurry

And uncomment this line from polyfills.ts:

/** ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // <- Uncomment this line

Here's the support status for Web Animations API.

Lastly, please do not use unpkg for the theming as it will get the CSS from the latest master and may introduce breaking changes. Instead, use it in styles.css as follows:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Updated demo