CODEWITHSUNDEEP
ionic-frameworkmodal-dialogangular5
Shefalee Chaudhary
Shefalee Chaudhary

Reputation: 602

Prevent modal popup reopen, angular 5 ionic framework

I am using following line of code to open modal popup.

import { ModalController} from 'ionic-angular';

  openModal()
  {
    const modal = this.modalCtrl.create(ModalPage);
    modal.present();
  }

Now, from local notification click event, it opens modal popup. Everytime I click notification it open modal, I want that if modal popup is already opened in application, it should not reopen it.

How can I prevent modal from reopening?

Any help on this is highly appreciated.

Upvotes: 1

Views: 2814

Answers (2)

Shefalee Chaudhary
Shefalee Chaudhary

Reputation: 602

import {Modal} from "ionic-angular/components/modal/modal";
import {ModalOptions} from "ionic-angular/components/modal/modal-options";
import {ModalController} from "ionic-angular";

export class ModalHelper {
  protected modal:Modal;
  protected isModalIsOpen:boolean=false;

  constructor(protected modalCtrl:ModalController) {

  }
  /**
   * opens a modal
   * @param component
   * @param data
   * @param {ModalOptions} opts
   */
  openModal (component: any, data?: any, opts?: ModalOptions) {
    if (this.isModalIsOpen === false) {
      this.modal = this.modalCtrl.create(component, data, opts);
      this.modal.present().then(()=>{
        this.isModalIsOpen = true;
      });
      this.modal.onDidDismiss(()=>{
        this.isModalIsOpen = false;
      })
    }
  }
}

I used openModal helper to open a modal from provider by usinf following line of code:

Provider: my-provider.providers.ts

import { ModalController} from 'ionic-angular';
import {ModalHelper} from "../../../helper/modal.helper";

  openModal()
  {
    this.modalHelper.openModal(ModalPage);
  }

Upvotes: 1

fastr.de
fastr.de

Reputation: 1523

First attempt: (track modal open status with flag)

import { ModalController} from 'ionic-angular';

  private modalOpen:boolean = false;
  openModal()
  {
    if (!this.modalOpen){
      this.modalOpen = true;
      const modal = this.modalCtrl.create(ModalPage);
      modal.present();
    }
  }

and on the dismiss function add this.modalOpen = false

Second attempt: (create Modal only once)

 import { ModalController} from 'ionic-angular';

  private modal;
  constructor(){
    this.modal = this.modalCtrl.create(ModalPage);
  }
  openModal()
  {
    this.modal.present();
  }

Edit after comments Third attempt: (track openState in Provider/Store)

import { StateProvider } from 'yourStateProvider';
import { ModalController} from 'ionic-angular';

  constructor(private state:StateProvider){}

  openModal()
  {
    if (!this.stateProvider.modalOpen){
      this.stateProvider.modalOpen = true;
      const modal = this.modalCtrl.create(ModalPage);
      modal.present();
    }
  }

ModalPage.ts

import { StateProvider } from 'yourStateProvider';

  constructor(private state:StateProvider){}

  dismiss(){
    this.stateProvider.modalOpen = false;
  }

StateProvider.ts

public modalOpen:boolean = false;

Upvotes: 1

Related Questions