I have 2 files that load data into 1 page. I want the content of component B to get loaded when components of component A are being loaded onto the page.

Component A.

 ngOnInit(): void {
    this.route.queryParams
      .pipe(
        first(),
        tap(
          (params) =>
            (this.params = params?.filters ? JSON.parse(params.filters) : {})
        ),
        switchMap(() =>
          this.http
            .get(
              this.configPrv.AppSetting.uriReports
                .getReportsDashboardConfig,
              {
                withCredentials: true,
              }
            )
            .pipe(
              tap(
                
                (response: {
                  fields: FieldsDefinition<Form>;
                  dimensions?: string;
                }) => {
                  this.form = this.formGenerator.init(
                    {
                      layout: {
                        'grid-template-columns': '1fr 1fr 1fr 1fr',
                        'column-gap': '1.5em',
                      },
                      fields: response.fields,
                    },
                    this.params
                  );
                 
                }
              ),
              switchMap(() =>
                this.form.values$.pipe(
                  tap(
                    (values: Form) =>
                      (this.reportEndpoint = values?.report || '')
                  ),
                  tap((filters) =>
                    this.router.navigate(['./'], {
                      relativeTo: this.route,
                      queryParams:
                        Object.keys(filters).length !== 0
                          ? { filters: JSON.stringify(filters) }
                          : {},
                    })
                  )
                )
              )
            )
        ),
        takeUntil(this._onDestroySubject)
      )
      .subscribe();
    
  }

Component B

 ngOnInit(): void {
    this.http
      .get<ReportBuilderReportConfig>(
        this.configPrv.AppSetting.uriReports.getReportsDashboardConfig,
        { withCredentials: true }
      )
      .pipe(tap((response) => {}))
      .subscribe((resp) => {});
  }

When the page is loaded, contents of component A are loaded but I want to have contents of component B load as well.