Use a Resolver to asynchronous pre-fetch data before navigating to Angular component,

details.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  template: '<div> {{ ourData }} </div>'
})
export class DetailsComponent {
  ourData = '';
  constructor(private route: ActivatedRoute) { }
  ngOnInit() {
    this.getData();
  }

  getData() {
    // We have access to the resolve object we passed in our Routes.
    // update the ourData prop whenever route.data changes:
    this.route.data.subscribe(({ ourData }) => this.ourData = ourData );
  }
}

Resolver.ts

import { Injectable } from "@angular/core";
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

class Backend {
  getData() { return data; }
}

@Injectable()
export class Resolver implements Resolve<any> {
  constructor (private backend: Backend) {}
  
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<any> {
    // assuming our route path is '/data/:id', we can access the 'id' parameter:
    return this.backend.getData(route.params.id);
  }
}

router.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DetailsComponent } from './details.component';
import { Resolver } from './Resolver';

const routes: Routes = [
  {
    path: '/data/:id',
    component: DetailsComponent,
    resolve: { ourData: Resolver },
  }
];

@NgModule({
  declarations: [
    DetailsComponent
  ],
  imports: [
    // use .forChild(routes) if routing module is not root
    RouterModule.forRoot(routes),
  ],
  exports: [
    RouterModule,
  ],
  providers: [
    // Provide the Resolver injectable:
    Resolver,
  ]
})