Mat Dialog boxes close button is not working on IOS devices

Question

Im using Angular 13 for my application. And I used angular-material Mat-Dialog box as a pop up modal. This is the HTML code of the submit and close buttons.

<mat-dialog-actions>
<button class="btn" mat-raised-button color="accent" (click)="closeModal()">
  <span class="btn-text">CLOSE</span>
</button>
<button class="btn" mat-raised-button style="background-color: #CF466F;" (click)="deleteAd(data.id)">
  <span *ngIf="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span *ngIf="!loading" class="btn-text">YES, DELETE</span>
</button>

Everything worked properly in Desktop & Android mobile devices. But it's not working properly in IOS devices. Here submit button is functioning as expected in my I phone (IOS version 12.5.5). But the close button is not working. And when the modal is poped up, it cant be closed since the close button is not functioning.

This is my Typescript code.

closeModal(): void {
this.ngZone.run(() => {
  this.dialogRef.close();
});

}

Can someone help me with this?

Overflight

is thare a reason you run this.dialogRef.close() inside a ngZone.run ? – Hackathorn

closeModal(): void { this.dialogRef.close(); } – Overflight

This also gave same thing. – Overflight

Must be some wierd bug, you can try you use mat-dialog-close directive on the button as well instead for the click binding. – Hackathorn

@Overflight did you fixed this issue? – Ixia

Answer 1

I had the same issue in closing mat-dialog issue in my application which is in angular14 later i upgraded into angular15, i fixed this issue by adding polyfills for latest javascript features

for that i have installed some dependencies

1) npm i core-js
2)npm install --save web-animations-js

i added these polyfills to my polyfills.ts file

after my pollyfills.ts looks like

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

import 'core-js';

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone'; // Included with Angular CLI.

you can configure importing core.js by adding specific features only by referring documentation https://github.com/zloirock/core-js#readme

below article helpmed me to reach at this solution https://dev.to/coly010/angular-how-to-support-ie11-4924

Monostome

Answer 2

I had the same problem in Angular version 13.2.0. I have another project with version 13.0.2 and there it works. It also did not work with version 14 or a higher 13.x for me.

So a quick fix would be downgrading.

Jerrilyn

iam using angular 14.x iam also facing same issue in iphone 8 plus ?did you found any other solution for this? – Ixia

Answer 3

I had the same problem! You have to disable animations for IOS <=13 !

I found the solution here: https://github.com/angular/angular/issues/45016

app.module.ts

const disableAnimations = !('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule.withConfig({ disableAnimations }),
...

Polysyndeton