Issue
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.
Solution
when you create a component you can get the reference
this.ref=this.container.createComponent(ClientRegistrationFormComponent);
You can subscribe to the Subject of the component (also you can access to all the properties of the component)
this.ref.instance.currentMessage.subscribe((res:any)=>{
...
})
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.