Ionic Multiple page and Ionic Sliding

gWe can Add Multi-line List, in Multi-line List displays multiple items in each component over more than one line. In this apps, we are creating a home page with a list of pages and adding item sliding. A sliding item is a list item that can be swiped to reveal buttons.

Here is this example we are learning

  • Adding multiple page link in home template
  • Adding swiped right to reveal hidden button
  • Use of [ngClass]

In apps screenshot, we have the image at a  left side of the page title and descriptions.  We have to upload images in assets folder of our apps.

Step 1: ionic start navigation blank –v2
Step 2: Add following code in home.html

<ion-header>
  <ion-navbar color="primary">.. Ionic Blank....</ion-header>
 
<ion-content padding>
  <ion-list>
    <ion-item-sliding *ngFor="let page of pages">
      <ion-item (click)="setNavigationLink(page.link)" [ngClass]="elementClasses()">
        <ion-avatar item-left>
          <img src="{{ page.thumb }}">
        </ion-avatar>
<h2>{{ page.title }}</h2>
</ion-item>
      <ion-item-options side="right">
        <button ion-button color="primary" (click)="buttonOne(page.title)">
        <ion-icon name="text"></ion-icon>BUTTON 1</button>
        <button ion-button color="secondary" (click)="buttonTwo(page.title)">
        <ion-icon name="call"></ion-icon>BUTTON 2</button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

Within our component we have 2 components:
• For organizing the content for the list
• Which contains two hidden buttons (with click events bound to
them) that are activated when swiping in from the right
On clicking on the hidden button we will be calling a method that will display the message in the browser console.

Step 3: Add following code in home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { TweetsPage } from '../tweets/tweets';
import { TechnologiesPage } from '../technologies/technologies';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public isSuccess: boolean;
  public isError: boolean;
  public isWarning: boolean;
  public canProceed: boolean;
  public pages: Array<{ title: string, thumb: string, description: string, link: any }>;
 
  constructor(public navCtrl: NavController) {
    this.pages = [
      {
        title: 'About',
        thumb: 'assets/images/about.png',
        description: 'Who we are. What we do. Why we’re here',
        link: AboutPage
      },
      {
        title: 'Contact Us',
        thumb: 'assets/images/contact.png',
        description: 'Drop us a line and get in touch we’d love to hear from you!',
        link: ContactPage
      },
      {
        title: 'Technologies',
        thumb: 'assets/images/tech.png',
        description: 'Third party resources used by this app',
        link: TechnologiesPage
      },
      {
        title: 'Tweets',
        thumb: 'assets/images/tweet.png',
        description: 'The latest news updates from our Twitter account',
        link: TweetsPage
      }
    ];
    this.isSuccess = true;
    this.isError = false;
    this.isWarning = false;
    this.canProceed = true;
  } // End of constructor
 
  elementClasses() {
    let classes = {
      isSuccess: this.isSuccess,
      isError: this.isError,
      isWarning: this.isWarning,
      canProceed: this.canProceed
    };
    return classes;
  }
 
  buttonOne(page) {
    console.log(`I could do a lot more than just print out this message for the ${page} page to the browser console`);
  }
 
  buttonTwo(page) {
    console.log(`Yep, I’m an under-performer for the ${page} page too :(`);
  }
 
  setNavigationLink(page) {
    this.navCtrl.push(page);
  }
}

Step 4: Add the following code in home.scss

page-home {
  .isSuccess {
    color: #1E88E5 !important;
  }
  .isError {
    color: #D43669 !important;
  }
  .isWarning {
    color: #d4d34f !important;
  }
  .canProceed {
    background-color: #deeae8;
  }
}

On continuing our previous example, we are creating about page where we will be displaying an image and text through an ion-slides.   The Slides component allows multiple contents to be loaded (e.g images, video or text), as individual slides, into a single container which can then be swiped through. The Slides component is a multi-section container. Each section can be swiped or dragged between. It contains any number of Slide components.

Step 5 : Add the following code in about.html

<ion-header> .. about ..  </ion-header>
 
<ion-content padding>
  <ion-slides #picSlider (ionDidChange)="onSlideMoved()" >
    <ion-slide>
      <ion-item>
<h1># 1</h1>
<img src="assets/images/slide1.jpg">
<h2>Buddha (India)</h2>
Health is the greatest gift, contentment the greatest wealth, faithfulness the best relationship.
 
      </ion-item>
    </ion-slide>
    <ion-slide>
      <ion-item>
<h1># 2</h1>
<img src="assets/images/slide2.jpg">
<h2>Yeshi Tsogyal (8 Century)</h2>
What we understand to be phenomena. Are but the magical projections of the mind.
 
      </ion-item>
    </ion-slide>
    <ion-slide>
      <ion-item>
<h1># 3</h1>
<img src="assets/images/slide3.jpg">
<h2>Lord Buddha</h2>
VWhat we think, we become
 
      </ion-item>
    </ion-slide>
  </ion-slides>
</ion-content>

Step 6: Add the following code in about.ts. We need to import slides and viewChilde. In an angular, we have @ViewChild decorator which allow us to interact with parent and child component. ViewChild helps us to get access to a component and its methods of the parent component.

We create an object called slideOpts which store the configuration options for our Slides component (these are part of the Slides component API – the pager property defines whether we display pagination bullets and the speed property defines, in milliseconds, how long the transition between slides will last

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
 
@IonicPage()
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})
 
export class AboutPage {
  @ViewChild('picSlider') viewer: Slides;
 
  constructor(public navCtrl: NavController, public navParams: NavParams) { }
 
  slideOpts = {
    pager: true,
    speed: 750
  };
 
  onSlideMoved() {
    let currIndex = this.viewer.getActiveIndex(),
      numSlides = this.viewer.length(),
      firstSlide = this.viewer.isBeginning(),
      lastSlide = this.viewer.isEnd();
 
    console.log(`Current index is, ${currIndex}`);
 
    if (firstSlide) {
      console.log(`This is the first slide of ${numSlides} slides`);
    }
    else if (lastSlide) {
      console.log(`This is the last slide of ${numSlides} slides`);
    }
  }
 
  ionViewDidLoad() {
    console.log('ionViewDidLoad About');
  }
 
}