CODEWITHSUNDEEP
angularionic-frameworkionic2
Gabe O'Leary
Gabe O'Leary

Reputation: 2070

Creat custom reusable Alert (or Modal) component with Ionic2

I have an alert that has some startup and other logic attached which I would like to reuse in multiple places inside my app.

My current solution which I do not like is that I have a component which on construction creates and presents the alert. so when I want the alert to show up I have to push my new component onto the stack which then results in the alert showing up. On alert cancel or action, I pop my new component off of the stack and it returns to the previous view.

The problem is that a white screen appears before the alert and then disappears, so the alert isn't really being shown on top of the correct view.

Is there a better way to do this?

Upvotes: 0

Views: 1774

Answers (2)

The Best
The Best

Reputation: 103

strong textin Ionic 5 we can use share module :

share modals example image

1/ create SharedModule and Declare and exports Modals you want to share

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { PrItemPage } from 'src/app/purchase/purchase-request/modals/pr-item/pr-item.page';
import { PrItemSelectPage } from 'src/app/purchase/purchase-request/modals/pr-item-select/pr-item-select.page';
import { PrSelectPage } from 'src/app/purchase/purchase-request/modals/pr-select/pr-select.page';


@NgModule({
  declarations: [
    PrItemPage,
    PrItemSelectPage,
    PrSelectPage,
  ],
  imports: [
    CommonModule,
    IonicModule,
  ],
  exports: [
    PrItemPage,
    PrItemSelectPage,
    PrSelectPage,
  ]
})
export class SharedPRModalModule { }

2 Let import ShareModule to PageModule you want to reuse 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { PurchaseorderMaintainPage } from './purchaseorder-maintain.page';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { PurchaseRequestMaintainPageModule } from '../../purchase-request/purchase-request-maintain/purchase-request-maintain.module';
import { SharedPRModalModule } from 'src/app/_modals/shared-pr-modal/shared-pr-modal.module';
import { PrSelectPage } from '../../purchase-request/modals/pr-select/pr-select.page';
import { PrItemSelectPage } from '../../purchase-request/modals/pr-item-select/pr-item-select.page';
import { PrItemPage } from '../../purchase-request/modals/pr-item/pr-item.page';

const routes: Routes = [
  {
    path: '',
    component: PurchaseorderMaintainPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    SharedPRModalModule
  ],
  providers: [
    BarcodeScanner
  ],
  declarations: [PurchaseorderMaintainPage],
  entryComponents: [PrSelectPage, PrItemSelectPage, PrItemPage],
})
export class PurchaseorderMaintainPageModule {}

Upvotes: 0

SwankTheTank
SwankTheTank

Reputation: 1137

What you should do is create a service then import that service into any component that you want to use the alert in. I did this recently with an Ionic2 application. Something like this should work nicely.

import { Injectable, Inject } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Injectable()
export class AlertLoader {

  constructor(public alertCtrl: AlertController){}

  complexAlert(title, subTitle, buttonObj){
    let Alert = this.alertCtrl.create({
    title: title,
    subTitle: subTitle,
    buttons: buttonObj
    })
    console.log(Alert);
    Alert.present();
  }

}

and then to use it in your component, import it and call it like so. Dont forget to add it to your constructor though!

this.alertLoader.complexAlert('Title', 'subtitle', buttonObj)

you can hardcode that information if it will be constant or include it in another file and import it if you wish to use the alert elsewhere.

Hope this helps!

Upvotes: 3

Related Questions