Pass resolver data to child components : Angular

Question

I have a parent component with route. Inside that that component I have 3 child components but they don't have any routes. I am using their selector to render them. Now i have created a resolver service for the parent component and calling all api's for both parent child components, And i am passing the data to child components using @Input.

Is there any better approach to pass resolver data to child components, because i am going to use these child components in different parent components so in that case it will be complicated and repetitive.

Parent Component -

<div class="dashboard-outer">
    <app-dashboard-leftbar [leftpanelData]="resolverData"></app-dashboard-leftbar>

    <app-dashboard-topbar [toppanelData]="resolverData"></app-dashboard-topbar>

    <div class="dashboard-content-outer">
        <div class="dashboard-content-area">

        </div>
    </div>
    <app-dashboard-rightbar [rightPanelData]="resolverData"></app-dashboard-rightbar>
</div>

Resolver Service -

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {

    const leftpanel = this._ajaxService.apiCall({}, 'dashboard/leftpanel', 'POST');
    const toppanel = this._ajaxService.apiCall({}, 'dashboard/toppanel', 'POST');
    const rightpanel = this._ajaxService.apiCall({}, 'dashboard/rightpanel', 'POST');


    const dataForDashboard = forkJoin(leftpanel, toppanel, rightpanel)
    return dataForDashboard;
  }

Answer 1

Have the common service to keep the data with set and get method. Inject the common service in your dashboard(Parent) component and other child components.

Using setData method you can set the data from dashboard(Parent) component

Using getData method you can get the data from any of the child component

Please refer this example

https://stackblitz.com/edit/angular-resolver-simple-example01?file=src%2Fapp%2Fcomponents%2Fhello%2Fhello.component.html