I am currently working on a project in Ionic 3.5, where I need to implement a feature that automatically loads an image "ad" after the page finishes loading.
Right now, clicking a button successfully displays the image. However, I want this functionality to occur automatically when the page is loaded without needing user interaction.
I attempted to execute the function on page load like this...
import { Component, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ImageViewerController } from 'ionic-img-viewer';
@IonicPage({
segment: 'sponsor/:sponsorId'
})
@Component({
selector: 'page-sponsor-detail',
templateUrl: 'sponsor-detail.html',
})
export class SponsorDetailPage {
// @ViewChild('#myImage') myImage: ElementRef;
sponsor: any;
_imageViewerCtrl: ImageViewerController;
constructor(public navCtrl: NavController, public navParams: NavParams, imageViewerCtrl: ImageViewerController, private element: ElementRef) {
this._imageViewerCtrl = imageViewerCtrl;
}
ionViewWillEnter() {
var imgObj = this.element.nativeElement.querySelector('#myImage');
console.log(this.element);
console.log(imgObj);
// this.presentImage(imgObj);
}
presentImage(myImage: any) {
const imageViewer = this._imageViewerCtrl.create(myImage);
imageViewer.present();
}
Sponsor Detail View
//sponsor-detail.html
<button *ngIf="sponsor?.ad" ion-button round (click)="presentImage(myImage)"><ion-icon name="eye"></ion-icon> Visit Ad</button>
<img id="myImage" style="display:none;" [src]="sponsor?.ad" #myImage (click)="presentImage(myImage)" />
However, I am not able to retrieve any data using querySelector despite having all the necessary data in "this.element". Even targeting just an "img" tag does not yield any results. I have looked into ViewChild but struggled to implement it effectively.
One potential solution might be triggering the click event in the view once the page has finished rendering, ensuring it works across different platforms.
As a newcomer to Ionic and Angular, any guidance would be greatly appreciated!