Easy Code Stuff: Ionic 4 Working With Modal Popup

In this article I'm going to show you guys, how we can open a Modal Popup in an Ionic Application and How we can pass values to that popup.

Lets start it with a Ionic Blank Application.

1	Ionic start AppModal blank

This is the current folder hierarchy.

Now lets add a text field and button to home screen. The text we enter to the text field will pass to the Modal Popup when we click the button. Lets add this simple html code to create the UI. I have button click event "onShowGreetingsClicked()" to open the popup.

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Easy Code Stuff
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label floating>
      First Name
    </ion-label>
    <ion-input type="text" [(ngModel)]="firstName"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>
      Last Name
    </ion-label>
    <ion-input type="text" [(ngModel)]="lastName"></ion-input>
  </ion-item>
  <ion-item>
    <button ion-button full color="primary" type="button" (click)="onShowGreetingsClicked()">
      <ion-icon name="checkmark"></ion-icon>&nbsp;&nbsp;Show Greetings</button>
  </ion-item>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  firstName: string = '';
  lastName: string = '';

  constructor(public navCtrl: NavController) {

  }

  onShowGreetingsClicked(): void {
    console.log('clicked');
  }

}

Lets see how out application looks like using below command.

1	Ionic Serve

Now lets add Page Called ModalGreeting using Ionic CLI.

1	ionic generate page ModalGreeting --no-module

Now this is the current folder hierarchy.

This is the sample code I'm getting it when I generate the page form Ionic CLI.

modal-greeting.html

<ion-header>

  <ion-navbar>
    <ion-title>ModalGreeting</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

modal-greeting.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-modal-greeting',
  templateUrl: 'modal-greeting.html',
})
export class ModalGreetingPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalGreetingPage');
  }

}

Now lets pass the First Name and Last Name values to the Modal Popup and show it when we click the button.

Now lets see how our final code looks like.

app-module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ModalGreetingPage } from '../pages/modal-greeting/modal-greeting';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ModalGreetingPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ModalGreetingPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Easy Code Stuff
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label floating>
      First Name
    </ion-label>
    <ion-input type="text" [(ngModel)]="firstName"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>
      Last Name
    </ion-label>
    <ion-input type="text" [(ngModel)]="lastName"></ion-input>
  </ion-item>
  <ion-item>
    <button ion-button full color="primary" type="button" (click)="onShowGreetingsClicked()">
      <ion-icon name="checkmark"></ion-icon>&nbsp;&nbsp;Show Greetings</button>
  </ion-item>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController, NavParams, ModalController } from "ionic-angular";
import { ModalGreetingPage } from '../modal-greeting/modal-greeting';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  firstName: string = '';
  lastName: string = '';

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public modalCtrl: ModalController
  ) {

  }

  onShowGreetingsClicked(): void {
    let modal = this.modalCtrl.create(ModalGreetingPage, {firstName: this.firstName, lastName: this.lastName});
    modal.present();
  }

}

modal-greeting.html

<ion-header>

  <ion-navbar>
    <ion-title>Easy Code Stuff Greeting</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  Hello {{firstName}} {{lastName}}
</ion-content>

modal-greeting.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-modal-greeting',
  templateUrl: 'modal-greeting.html',
})
export class ModalGreetingPage {
  firstName: string = '';
  lastName: string = '';

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.firstName = navParams.get("firstName");
    this.lastName = navParams.get("lastName");
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalGreetingPage');
  }

}

Now lets see how our application looks like.

Hope you follow it up. See you again on next article.

Easy Code Stuff

Aug 12, 2018

Ionic 4 Working With Modal Popup

No comments:

JWT Token Decode Using Jquery