Hello
I have images in 10 folders and I am displaying image in 10 pages. I have one model for display single image. So my question is is there any way to display all image in the same model.
here I have the code:
**home.ts**
<ion-card class="one-image" *ngFor="let image of imgArr">
<img src="http://example.com/ionic/imgfolder1/{{image}}.jpg" tappable (click)="openPreview(image)">
</ion-card>
**home.ts**
import { ModalController } from '@ionic/angular';
import { ImageModalPage } from '../image-modal/image-modal.page';
openPreview(image) {
this.modalController.create({
component: ImageModalPage,
componentProps: {
image: image
}
}).then(modal => {
modal.present();
});
}
image-model.page.ts
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';
@ViewChild('slider', { read: ElementRef })slider: ElementRef;
image: any;
constructor(private navParams: NavParams, private modalController: ModalController) { }
ngOnInit() {
this.image = this.navParams.get('image');
}
zoom(zoomIn: boolean) {
let zoom = this.slider.nativeElement.swiper.zoom;
if (zoomIn) {
zoom.in();
} else {
zoom.out();
}
}
close() {
this.modalController.dismiss();
}
model.html
<ion-slides #slider>
<ion-slide>
<div class="swiper-zoom-container">
<img src="http://example.com/ionic/imgfolder1/{{ image }}.jpg">
</div>
</ion-slide>
</ion-slides>
Here is my full code, I want to display images from diff page in the same model.