Get element from view, inside controller in Ionic 3.5

Question

I am trying to accomplish a simple task in Ionic 3.5, I want load a function after the page loads to display an image "ad".

Currently I have a button setup when you click it, it will load this image correctly. I just want this functionality to happen on page load automatically as well.

I was trying to just run the function on page load like so...

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>&nbsp;Visit Ad</button>
<img id="myImage" style="display:none;" [src]="sponsor?.ad" #myImage (click)="presentImage(myImage)" />

However I cant seem to get any data returned from the querySelector despite the "this.element" containing all the data on the view that i'm trying to target. I have tried to event just target an "img" tag but that does not return anything either. I read some thing regarding ViewChild but wasn't able to implement anything myself using that.

Perhaps another solution would be to trigger the click event in the view when the page is done rendering but I want to make sure the solution will work cross-platform.

I am new to Ionic and Angular, any help is appreciated!

Answer 1

You can use the ionViewDidLoad method:

@Page({
  templateUrl: 'build/pages/somepage/somepage.html'
})
export class SomePage {
  constructor() {
    // ...
  }

  ionViewDidLoad() {
    // Put here the code you want to execute after the page has fully loaded
  }
}

Also, a better way to do this now would be to use a local variable rather than searching the DOM. You can give something a local variable like this:

<img id="myImage" style="display:none;" [src]="sponsor?.ad" #myImage (click)="presentImage(myImage)" />

and then grab it using @ViewChild:

import {ElementRef, ViewChild} from '@angular/core';
@ViewChild('myImage') myImage: ElementRef;

ionViewDidLoad() {
    // do what you want with this.myImage
}