Open Modal with images

Question

I am very new in ionic.

I am making a basic ionic application which has list of users with user name and image (which is array).

Ts:

  users = [
    {
      "name": "First User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
    {
      "name": "Second User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
    {
      "name": "Third User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
  ]

Html:

<div *ngFor="let user of users">
    <span> {{ user.name }} </span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button ion-button type="button" (click)="openDocument(user.image)"> View Image </button>
    <br>
</div>

Working example: https://stackblitz.com/edit/ionic-1tzycv

In the above given example i have a button with View Image and on click over the button i am in the need to display the images in modal one by one with next and previous button.

I have searched for various sources but able to get loading of separate page alone in modal like,

this.modalCtrl.create(SomePage, {}, { enableBackdropDismiss: false }).present();

How to display the images which is array (means that user has lots of images to display)? On click the view image modal needs to get opened and the images of that user needs to be displayed one by one viewing each image on click next button in modal.

Something like this in ref: https://codepen.io/anon/pen/NoGVGb but i need it in angular 6 with ionic 3.

Answer 1

Based on Kurtis' answer I managed to do the Image slide show. Please vote his answer up

pages/model/model.ts

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

@Component({
  selector: 'page-model',
  templateUrl: './model.html'
})
export class ModelPage {

  private imgs:any;
  private name:string;
  private current: number = 0;

  constructor(public navCtrl: NavController,public viewCtrl:ViewController,public navParams: NavParams) {

  }

  closeModal(){
    this.viewCtrl.dismiss();
  }

  ionViewDidLoad() {
    this.imgs=(this.navParams.get("img"));
    this.name=(this.navParams.get("name"));
  }

  next() {
    this.current = (this.current + 1) % this.imgs.length;
  }
  prev() {
    this.current = (this.current + this.imgs.length - 1) % this.imgs.length;
  }

}

pages/model/model.html

<ion-header>
  <ion-navbar>
    <ion-title>{{ name || 'Header'}}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding> 
  <ion-buttons center>
    <button ion-button (click)="prev()"><ion-icon name="arrow-back"></ion-icon></button>
      {{ current + 1 }}
    <button ion-button (click)="next()"><ion-icon name="arrow-forward"></ion-icon></button>
  </ion-buttons>
  <ng-container *ngFor="let img of imgs; let i = index">
    <ion-thumbnail *ngIf="i == current">
      {{ img }}<br>
      <img [src]="img" /><br>
    </ion-thumbnail>    
  </ng-container>

</ion-content>

See it in action in this StackBlitz

Answer 2

hope it will helpful to you

pages/home/home.ts:

 import { Component } from '@angular/core';
 import { NavController, ModalController } from 'ionic-angular';
 import {ModelPage} from '../model/model';

 @Component({
     selector: 'page-home',
     templateUrl: 'home.html'
 })
  export class HomePage {
      constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
      }

       openDocument(imageSource) {
           this.modalCtrl.create(ModelPage,{"img":imageSource}).present();
       }
  }

pages/model/model.ts (new file):

 import { Component } from '@angular/core';
 import { NavController,NavParams } from 'ionic-angular';
 import { ViewController } from 'ionic-angular';
 @Component({
     selector: 'page-model',
     templateUrl: 'model.html'
 })
 export class ModelPage {

   private imgs:any;
    constructor(public navCtrl: NavController,public viewCtrl:ViewController,public navParams: NavParams) {

    }

    closeModal(){
      this.viewCtrl.dismiss();
   }

   ionViewDidLoad() {
      this.imgs=(this.navParams.get("img"));

   }

 }

pages/model/model.html (noew file):

 <ion-header>

  <ion-navbar>
   <ion-title>ModalPage</ion-title>
   <ion-buttons end>
   <button ion-button (click)="closeModal()">Close</button>
   </ion-buttons>
  </ion-navbar>

 </ion-header>
 <ion-content padding>
 <ion-list>
  <ion-item *ngFor="let img of imgs">
  <ion-thumbnail slot="start">
    <ion-img [src]="img"></ion-img>
   </ion-thumbnail>    
   </ion-item>
 </ion-list>
</ion-content>

app/app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import  {ModelPage} from '../pages/model/model';

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

working link https://stackblitz.com/edit/ionic-kyyqga?embed=1&file=app/app.module.ts