how to preload angular component data from api

Resolvers are essentially a feature of the Angular routing core library that allows us to load and combine data from various sources (API services, databases, files etc.) and inject this data into the routing snapshot data before component/route loads

I will recommend use resolver here with the route add resolve attribute

{
  path: 'book',
  component: BookComponent,
  resolve: {
    pageData: APIResolver
  }
}

create resolver class

export class APIResolver implements Resolve<any> {
  // constructor(private apiService: ApiService, private router: Router){}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
  // return data from api here
  return 1;
  }
}

In the component you will get value before component load

constructor(private route: ActivatedRoute) { }
    
ngOnInit() {
  console.log(this.route.snapshot.data, 'testdata')
}

for more info you can check this demo stackblitz.com/edit/angular-ivy-cmevm

In Angular 16, we can use a different approach.

We can create a resolver function

ng generate resolver my-resolver

Which will give us some template code for our resolver function, returning a ResolveFn from '@angular/router';. We can use this resolver function preload our component with data. Similarly to Sunny's answer. Create a resolve attribute in your routing module.

// routing module
{
  path: 'book',
  component: BookComponent,
  resolve: {
    pageData: myResolver
  }
}

Then, implement the resolver, which will fetch the data you need to preload.

// myResolver.resolver.ts
export const myResolver: ResolveFn<Promise<any>> = (
  route,
  state,
  myApiService: MyApiService = inject(MyApiService)
) => {
// assume we have a service to fetch our data.
// In this example, 'myApiService' has a function which returns the data we need. 
// It returns a Promise, but your service might return an Observable (which is totally OK.)
  return myApiService.getData(route.params['slug']);
};

Here's an example from Angular's documentation