I have this arrangement of the components, such that a component called landing-home.component loads another component client-registration-form.component using ViewContainerRef, on an <ng-template>, rendering on ngAfterViewInit.
The component client-registration-form.component represents a form with input fields. This component has a subject as
messageSource = new BehaviorSubject<ClientRegistrationModel>(new ClientRegistrationModel(..))

which is the form's input data. I want to capture this data in the parent component landing-home.component.
client-registration-form.component.html
<div>
    <div>
        <span>First Name</span>
        <input type="text" [(ngModel)]='clientRegistrationMoel.firstName'/>
    </div>
    <!-- other fields -->
    <div>
        <input type="button" value="Submit" (click)="OnSubmit()">
    </div>
</div>

client-registration-form.component.ts
import { Component, Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import {ClientRegistrationModel} from '../models/client-registration.model';

@Component({
  selector: 'app-client-registration-form',
  templateUrl: './client-registration-form.component.html'
})
@Injectable()
export class ClientRegistrationFormComponent {
   clientRegistrationMoel : ClientRegistrationModel = new ClientRegistrationModel("","","","");
  constructor() {}
  private messageSource = new BehaviorSubject<ClientRegistrationModel>(new ClientRegistrationModel("","","",""));
  public currentMessage = this.messageSource.asObservable();

  OnSubmit()
  {
    this.messageSource.next(this.clientRegistrationMoel);
  }
}

landing-home.component.html
<div>
    <ng-template #container></ng-template>
</div>
<!-- other parent specific html -->

landing-home.component.js
import { Component, ViewChild, ViewContainerRef, Input, ChangeDetectorRef } from '@angular/core';
import {ClientRegistrationFormComponent} from '../client-registration-form/client-registration-form.component';
import {ClientRegistrationModel} from '../models/client-registration.model';

@Component({
  selector: 'app-landing-home',
  templateUrl: './landing-home.component.html'
})

export class LandingHomeComponent {
  @ViewChild('container', {read: ViewContainerRef}) container!: ViewContainerRef;
  constructor(private clientRegistrationFormComponent: ClientRegistrationFormComponent,
              private changeDetector: ChangeDetectorRef){}

  registrationDetails : ClientRegistrationModel = new ClientRegistrationModel('','','','');
 
  ngAfterViewInit()
  {
    // some condition
    this.container.createComponent(ClientRegistrationFormComponent);
    this.changeDetector.detectChanges(); 
  }
}

What I am trying to achieve here is that I have a list of child components. Child component A, B, C etc. and a parent component P. The appropriate child will be loaded based on certain condition along with while loading the parent P. Now I want a way to transfer data such as form input (or may be just a boolean flag informing the parent that the form of the child is submitted successfully or failed over a REST call in the child) from the currently loaded child A or B or C.
The above code is just a try to find a way to do this and not necessarily has to follow the same structure but importantly I have a long list of child components and do not want to add those with *ngIf.
Let me know if there is a better approach for such scenario.