Clash Royale CLAN TAG#URR8PPP

Child Component to wait for Parent Component ngOnInit async operation before initializing

I'm using mat-stepper for implementing customer onboarding process.
All 5 individual child mat-stepper component are inside one parent component.

mat-stepper

child

mat-stepper

component

parent

<parent-html>
<mat-horizontal-stepper #ccStepper [linear]="isLinear">
<mat-step [stepControl]="childAForm">
<child-a></child-a>
</mat-step>
</mat-horizontal-stepper>

<mat-horizontal-stepper #ccStepper [linear]="isLinear">
<mat-step [stepControl]="childBForm">
<child-b></child-b>
</mat-step>
</mat-horizontal-stepper>
//3 more child components
</parent-html>


I have to save and proceed data for each child component. applicationID is generated after save and proceed of first child component and my second, third and fourth child components have to persist data entered in first component based on applicationID.

save and proceed

applicationID

save and proceed

first child

second

third

fourth

first

applicationID

To further complicate things, whenever user saves information, it has to be stored as draft with applicationID generated (different route altogether). User can then click on applicationID and all the same information have to be fetched and user can then edit the information of previous and next component.

draft

applicationID

applicationID

For normal save and proceed, I am storing applicationID in behaviour subject and fetching all the information in all child components.

applicationID

behaviour subject

Is it the right way to do as it triggers multiple calls even though I have information available in sibling components?

For edit scenario, I am passing the customer information via @Input to all child components. The problem here is child ngOnInit is fired before parent ngOnInit has resolved the @Input value. hence always failing the condition check.

@Input

child

ngOnInit

parent

ngOnInit

@Input

What would be the best approach to solve it? Thanks for your time!!!

1 Answer
1

For Edit Scenario, If you pass value using @Input decorator from Parent to Child Component. You can access those values using ngOnChanges() method in child component.

Child Component:

ngOnChanges(changes: SimpleChanges)
if(this.inputData)



For Application ID, you can set the application ID in a singleton service and you can access that application ID in child component by injecting the service.

applicationID

inputData

ngChanges

ngOnInit

inputData

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.