angularangular-materialmodal-dialogmat-dialog

Mat Dialog boxes close button is not working on IOS devices


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?


Solution

  • 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