Ionic Modal Component and Multiple page

We will be continuing our previous  Ionic Multiple Page & Ionic Sliding -1 example. Here we are creating a new page called technologies.

A modal is a form of temporary UI that slides into the screen, over the page content, and is often used for login/registration forms, composing messages or presenting
app configuration options for example. In this apps, when clicking on any of list item in our technologies page, it will display modal overlay on top of current page Technologies displaying detail information of each item.

Step 1:  Add a new page, ionic g page technologies.

Step 2:  Add  following code in technologies.html

<ion-header>
.....>Technologies</ion-title>
</ion-header>
 
<ion-content padding>
  <ion-list>
    <ion-list-header >
      Technologies
    </ion-list-header>
    <ion-item *ngFor="let technology of technologies" (click)="activateModal(technology)"[ngStyle]="elementStyles()" >
      {{ technology.name }}
    </ion-item>
  </ion-list>
</ion-content>

 

Step 3: Add the following code in home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { ModalsPage } from '../modals/modals';
 
@IonicPage()
@Component({
  selector: 'page-technologies',
  templateUrl: 'technologies.html',
})
 
export class TechnologiesPage {
  public technologies: Array<{ name: string, date: string, summary: string, website: any }>;
 
  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
    this.technologies = [
      {
        name: "Angular JS",
        date: "October 20th 2010",
        summary: "Web application framework developed and maintained by Google",
        website: "http://www.angular.org"
      },
      {
        name: "Apache Cordova",
        date: "2009",
        summary: "Develop mobile apps with HTML, CSS & JS and publish to multiple platforms from one single codebase",
        website: "https://cordova.apache.org"
      },
      {
        name: "TypeScript",
        date: "October 1st 2012",
        summary: "Strict superset of JavaScript developed and maintained by Microsoft",
        website: "http://typescriptlang.org"
      }];
  }
 
  activateModal(link) {
    let modal = this.modalCtrl.create(ModalsPage, link);
    modal.present();
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad Technologies');
  }
 
  elementStyles() {
    let styles = {
    'color': 'blue',
    'font-weight': 'bold',
    'font-size': '1.1em'
    };
    return styles;
  }
 
}

 

We have to import ModalController component first and have to create a class custom component called Modal, where we want to display content of technologies over the technologies page.

Step 4:  ionic g page modals

Step 5:  Add the following code in modal.ts

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
 
@Component({
  selector: 'page-modals',
  templateUrl: 'modals.html',
})
export class ModalsPage {
  public name: string;
  public summary: string;
  public website: string;
 
  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
    this.name = this.navParams.get('name');
    this.summary = this.navParams.get('summary');
    this.website = this.navParams.get('website');
  }
 
  ionViewDidLoad() {
    console.log('ionViewDidLoad Modals');
  }
 
  closeModal() {
    this.viewCtrl.dismiss();
  }
}
 Step 6:  Add the following code in modal.html
<ion-header>
  <ion-toolbar>
    <ion-title>Description</ion-title>
    <ion-buttons start>
      <button ion-button color="primary" (click)="closeModal()">
        <span>Close</span>
        <span showWhen="ios">Cancel</span>
      <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-list>
    <ion-item>
<h2>{{ name }}</h2>
<a href="{{ website }}" target="_blank">Visit website</a>
    </ion-item>
  </ion-list>
</ion-content>
Advertisements
Oc