Ionic Modal Tutorial

In this tutorial, we can learn how to display modal in ionic with step by step tutorial.

Download Source code:

Steps to Implement Modal in ionic

  1. Create new page using ionic g page edit where edit is an page name
  2. Declare your page inside app.module.ts

```typescript

<span class="hljs-keyword">import</span> { NgModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>;
<span class="hljs-keyword">import</span> { BrowserModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/platform-browser'</span>;
<span class="hljs-keyword">import</span> { RouteReuseStrategy } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/router'</span>;

<span class="hljs-keyword">import</span> { IonicModule, IonicRouteStrategy } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ionic/angular'</span>;
<span class="hljs-keyword">import</span> { SplashScreen } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ionic-native/splash-screen/ngx'</span>;
<span class="hljs-keyword">import</span> { StatusBar } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ionic-native/status-bar/ngx'</span>;

<span class="hljs-keyword">import</span> { AppComponent } <span class="hljs-keyword">from</span> <span class="hljs-string">'./app.component'</span>;
<span class="hljs-keyword">import</span> { AppRoutingModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'./app-routing.module'</span>;
<span class="hljs-keyword">import</span> { EditPageModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'./edit/edit.module'</span>;

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, EditPageModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> AppModule { }

Let's create UI in home page

home.page.html

<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ion-header</span> [<span class="hljs-attr">translucent</span>]=<span class="hljs-string">"true"</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">ion-toolbar</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-title</span>></span>
      Codesundar.com
    <span class="hljs-tag"></<span class="hljs-name">ion-title</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">ion-toolbar</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-header</span>></span>

<span class="hljs-tag"><<span class="hljs-name">ion-content</span> [<span class="hljs-attr">fullscreen</span>]=<span class="hljs-string">"true"</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">ion-list</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-item</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">ion-avatar</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"start"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{profile.imgURL}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /></span>
      <span class="hljs-tag"></<span class="hljs-name">ion-avatar</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">ion-label</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h3</span>></span></span><span class="hljs-template-variable">{{profile.name}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">p</span>></span></span><span class="hljs-template-variable">{{profile.email}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">ion-label</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">ion-button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"edit()"</span>></span>
        Edit
      <span class="hljs-tag"></<span class="hljs-name">ion-button</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ion-item</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">ion-list</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-content</span>></span></span>

Code Explanation:

  • We have created ionic item where we are displaying name, email address from profile object
  • when user click edit, we can pass the data to edit() and display modal

home.page.ts

edit() {
    <span class="hljs-keyword">this</span>.modalCtrl.create({
      component: EditPage,
      componentProps: <span class="hljs-keyword">this</span>.profile
    }).then(modalres => {
      modalres.present();

      modalres.onDidDismiss().then(res => {
        <span class="hljs-keyword">if</span> (res.<span class="hljs-keyword">data</span> != <span class="hljs-literal">null</span>) {
          <span class="hljs-keyword">this</span>.profile = res.<span class="hljs-keyword">data</span>;
        }
      })
    })
}

Code Explanation:

  • we created modalCtrl Object from ModalController
  • Using the object, we're displaying EditPage and we're passing this.profile object to modal
  • We're displaying modal using modalres.present()
  • When user close the modal, we're listening the data via onDidDismiss() and we assigned final value to this.profile

Edit Page

edit.page.html



<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ion-header</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">ion-toolbar</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-title</span>></span>edit<span class="hljs-tag"></<span class="hljs-name">ion-title</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">ion-toolbar</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-header</span>></span>

<span class="hljs-tag"><<span class="hljs-name">ion-content</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">ion-item</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-label</span>></span>
      Name
    <span class="hljs-tag"></<span class="hljs-name">ion-label</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> [(<span class="hljs-attr">ngModel</span>)]=<span class="hljs-string">"user.name"</span>></span><span class="hljs-tag"></<span class="hljs-name">ion-input</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">ion-item</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">ion-item</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-label</span>></span>
      Email
    <span class="hljs-tag"></<span class="hljs-name">ion-label</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> [(<span class="hljs-attr">ngModel</span>)]=<span class="hljs-string">"user.email"</span>></span><span class="hljs-tag"></<span class="hljs-name">ion-input</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">ion-item</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">ion-button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"close()"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">ion-button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-content</span>></span></span>

edit.page.ts

<span class="hljs-keyword">import</span> { Component, OnInit } from <span class="hljs-string">'@angular/core'</span>;
<span class="hljs-keyword">import</span> { ModalController, NavParams } from <span class="hljs-string">'@ionic/angular'</span>;

<span class="hljs-meta">@Component({
  selector: <span class="hljs-meta-string">'app-edit'</span>,
  templateUrl: <span class="hljs-meta-string">'./edit.page.html'</span>,
  styleUrls: [<span class="hljs-meta-string">'./edit.page.scss'</span>],
})</span>
export <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">EditPage</span> <span class="hljs-title">implements</span> <span class="hljs-title">OnInit</span> </span>{

  user: any = {};

  <span class="hljs-keyword">constructor</span>(
    <span class="hljs-keyword">private</span> modalCtrl: ModalController,
    <span class="hljs-keyword">private</span> navParams: NavParams
  ) {

    <span class="hljs-keyword">this</span>.user = <span class="hljs-keyword">this</span>.navParams.<span class="hljs-keyword">data</span>;

  }

  ngOnInit() {
  }

  close() {
    <span class="hljs-keyword">this</span>.modalCtrl.dismiss(<span class="hljs-keyword">this</span>.user);
  }
}

code explaination

  • Using NavParams we're receiving data which is passed from the previous (home) page & assign to this.user
  • When user click close() we're dismissing modal with user object.