ngAfterViewInit is not getting called while navigating between pages

Cart Page

import { Component, OnDestroy, AfterViewInit, OnInit, AfterContentInit, ChangeDetectorRef, } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'
import { StorageService } from '../data/storage.service';
import { DataProviderService } from '../data/data-provider.service';
import * as _ from 'lodash';
@Component({
selector: 'app-cart',
templateUrl: './cart.page.html',
styleUrls: ['./cart.page.scss'],
})
export class CartPage implements AfterViewInit, AfterContentInit, OnDestroy, OnInit {

cartItems = [];
totalAmount = 0;

constructor(public cart: StorageService, private cdRef: ChangeDetectorRef, public dataProvider: DataProviderService, private router: Router, private route: ActivatedRoute) {
}



ngOnInit() {

console.log("Init callled")
}

async ngAfterViewInit() {
console.log("Lets check!!");
console.log("\n\n\n\nthis is init func");
}
}


Details page

import { Component, OnInit, OnDestroy, AfterViewInit, ChangeDetectorRef, ChangeDetectionStrategy, AfterContentInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataProviderService } from '../data/data-provider.service';
import { UtilsService } from '../data/utils.service';
import { StorageService } from '../data/storage.service';
import { Router, NavigationEnd } from '@angular/router'
import * as _ from 'lodash';

@Component({
selector: 'app-details',
templateUrl: './details.page.html',
styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements AfterViewInit, AfterContentInit, OnDestroy {
constructor(private route: ActivatedRoute, private cdRef: ChangeDetectorRef, public dataProvider: DataProviderService, public utils: UtilsService, public cart: StorageService, private router: Router) {

}

ngAfterViewInit() {
console.log("Details page view Init");
}
ngOnDestroy() {
console.log("I'm destroying details!!");
}
ngAfterContentInit() {
console.log("View content is triggered");
}


Router Module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'details/:category/:id', loadChildren: './details/details.module#DetailsPageModule',runGuardsAndResolvers: 'always'},
{ path: 'products/:category', loadChildren: './products/products.module#ProductsPageModule' },
{ path: 'products/:category/:market', loadChildren: './products/products.module#ProductsPageModule' },
{ path: 'reports', loadChildren: './reports/reports.module#ReportsPageModule' },
{ path: 'news', loadChildren: './news/news.module#NewsPageModule' },
{ path: 'buy', loadChildren: './buy/buy.module#BuyPageModule' },
{ path: 'Offers', loadChildren: './offers/offers.module#OffersPageModule' },
{ path: 'cart', loadChildren: './cart/cart.module#CartPageModule' , runGuardsAndResolvers: 'always'},
{ path: 'checkout', loadChildren: './checkout/checkout.module#CheckoutPageModule' },
];

@NgModule({
imports: [RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
export class AppRoutingModule { }


When I load the page for the first time, it calls the function ngAfterViewInit. But when I navigate to some other route and come back, ngAfterViewInit is not getting called.

ngOnInit won't get called if we reload the page. So I'm using ngAfterViewInit which is not helping. Is this expected behavior?

How can I execute a function on each time user navigates to the page?

Continue reading...