In my current setup, I have organized the components in such a way that a component named landing-home.component loads another component called
client-registration-form.componentViewContainerRef within an <ng-template>, and this rendering occurs on ngAfterViewInit.
The
client-registration-form.componentsubject defined as:
messageSource = new BehaviorSubject<ClientRegistrationModel>(new ClientRegistrationModel(..))
which stores the data entered into the form. My objective is 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();
}
}
My goal with this structure is to have multiple child components, denoted here as A, B, C, etc., along with a parent component P. The appropriate child component will be loaded based on certain conditions when loading the parent P. I am seeking a method to transfer data, like the form inputs or status of form submission, from the currently loaded child component A, B, C.
This code snippet represents an attempt at finding a solution for this scenario, but it may not necessarily stick to the same structure. Most importantly, I want to avoid adding child components with *ngIf due to having a long list of them.
If you have suggestions for a better approach in handling such a situation, please feel free to share.