[ionic 4] slidesDidLoad does not called after first time load

[hardikdangar]

Bug Report

Ionic version: [x] 4.0.0-beta.17

Current behavior: slidesDidLoad does not called after first time load. it opens fine first time and autoplays but after its cached its not called at all. see below attached code home.page.html and home.page.ts, what happens here is first time it works fine but as soon as i click any of the links and get back to this page from main page slidesDidLoad never fires.

Expected behavior: slidesDidLoad does get called after first time load. it opens fine first time and autoplays and even if page is cached it should be called

Steps to reproduce: 1)

Related code:

home.page.html

<ion-content>
<ion-slides #mySlider  (ionSlidesDidLoad)="slidesDidLoad(mySlider)" pager>
    <ion-slide id="myElement1">
        <a routerLink="/mainpage">
          <img src="assets/home-slider/slider-one.jpg">
        </a>
        <div class="logo">
          <img src="assets/home-slider/app-new.png">

        </div>

    </ion-slide>
    <ion-slide id="myElement1">
        <a routerLink="/mainpage">
          <img  src="assets/home-slider/slider-two.jpg">
        </a>
        <div class="logo">
           <h5>Touch For More Designs</h5>
          <img  src="assets/home-slider/app-new.png">

        </div>

    </ion-slide>
    <ion-slide id="myElement1">

        <a routerLink="/mainpage">
          <img  src="assets/home-slider/slider-three.jpg">
        </a>
        <div class="logo">
           <h5>Touch For More Designs</h5>
          <img  src="assets/home-slider/app-new.png">

      </div>
    </ion-slide>
    <ion-slide id="myElement1">

        <a routerLink="/mainpage">
          <img  src="assets/home-slider/slider-for.jpg">
        </a>
        <div class="logo">
           <h5>Touch For More Designs</h5>
          <img  src="assets/home-slider/app-new.png">

        </div>

    </ion-slide>
    <ion-slide id="myElement1">

        <a routerLink="/mainpage">
          <img  src="assets/home-slider/slider-five.jpg">
        </a>
        <div class="logo">
           <h5>Touch For More Designs</h5>
          <img  src="assets/home-slider/app-new.png">

        </div>

    </ion-slide>
    <ion-slide id="myElement1">

        <a routerLink="/mainpage">
          <img  src="assets/home-slider/slider-six.jpg">
        </a>
        <div class="logo">
           <h5>Touch For More Designs</h5>
          <img  src="assets/home-slider/app-new.png">

        </div>

    </ion-slide>
    <ion-slide id="myElement1">
        <a routerLink="/mainpage">
          <img  src="assets/home-slider/slider-seven.jpg">
        </a>
        <div class="logo">
           <h5>Touch For More Designs</h5>
          <img  src="assets/home-slider/app-new.png">

        </div>

    </ion-slide>
    <ion-slide id="myElement1">
        <a routerLink="/mainpage">
          <img  src="assets/home-slider/slider-eight.jpg">
        </a>
        <div class="logo">
           <h5>Touch For More Designs</h5>
          <img  src="assets/home-slider/app-new.png">

        </div>

    </ion-slide>
    <ion-slide id="myElement1">
        <a routerLink="/mainpage">
          <img  src="assets/home-slider/slider-nine.jpg">
        </a>
        <div class="logo">
           <h5>Touch For More Designs</h5>
          <img  src="assets/home-slider/app-new.png">

        </div>

    </ion-slide>
    <ion-slide id="myElement1">

        <a routerLink="/mainpage">
          <img  src="assets/home-slider/slider-ten.jpg">
        </a>
        <div class="logo">
           <h5>Touch For More Designs</h5>
          <img  src="assets/home-slider/app-new.png">

        </div>

    </ion-slide>

  </ion-slides>
</ion-content>

home.page.ts

import { MenuController } from '@ionic/angular';

import { Component, ViewChild } from '@angular/core';

import { Slides } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('mySlider', { read: Slides }) slides: Slides;

  slidesDidLoad(slides: Slides) {
    console.log('slidesdidload');
    slides.startAutoplay();
    slides.pager = false;
  }
  constructor(private menu: MenuController) { }

  async ionViewDidEnter() {
    console.log('called2');
  }
}

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/home/sphere15/.nvm/versions/node/v10.11.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.1 (cordova-lib@8.1.0)
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   NodeJS : v10.11.0 (/home/sphere15/.nvm/versions/node/v10.11.0/bin/node)
   npm    : 6.4.1
   OS     : Linux 4.19

The behaviour is correct because the component will be keep in stack, that means (if you look into the DOM inspector) the component is still available. Learn more about lifecycle hooks here -> https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864

There are several options: Option 1) Use routerDirection="root". So the component will be destroyed from the dom on navigating Option 2) Use the ionViewWillEnter  or ionViewDidEnter  lifecycle hook which is also triggering when moving back to the page

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.