Router Data Resolver / Download Indicator from Angular 4? Can it be played in Ionic 3

Question

I saw in Angular 4 that you are using a Router Data Resolver, and you have a download indicator, so you won’t scroll through the screen when all the data is not loaded.
See the relevant partial code snippets below:
What is the Ionic 3 method?
I am trying to use a data table from PrimeNg in my application, and the pagination tab first displays one, and then after a few seconds switches to loading the first page. So I would like to do something similar to what I saw in Angular ...

app.module.ts

import {RouterModule} from '@angular/router'; import {routerConfig} from "./router.config"; @NgModule({ imports: [ RouterModule.forRoot(routerConfig) ] }) 

router.config.ts

 export const routerConfig: Routes = [ path: 'test/:id' component: DataComponent resolve: { key: DataComponentResolver } ]; 

data-component-resolver.ts

 import { Injectable } from '@angular/core'; import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs'; @Injectable() export class DataComponentResolver implements Resolve<[Data[]]> { constructor(private dataService: DataService) { } resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<[Data[]]> { return this.dataService.findData(route.params['id']); } } 

date-component.ts

 import {Component, OnInit} from '@angular/core'; @Component({ selector: 'data', templateUrl: './data.component.html' }) export class DataComponent implements OnInit{ $data: Observable<Data[]>; constructor(private route:ActivatedRoute) {} ngOnInit() { this.data$ = this.route.data.map(data => data['key']); //from router.config.ts } 

load-component.html

 <div *NgIf="isLoading$ | async" class="load-ind"> <img src="./images/spinning-cog.gif"/> </div> 

Loading-component.ts

 export class LoadingComponent implements OnInit{ isLoading$: Observable<boolean> constructor(private router: Router){ } ngInit() { this.isLoading$ = this.router.events .map(event => event instanceof NavigationStart || event instanceof RoutesRecognised); } } 

app.component.html

 <loading></loading> <div> <router-outlet></router-outlet> </div>