1

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

<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.

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.

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

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.

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

Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
candidJ
  • 4,289
  • 1
  • 22
  • 32

1 Answers1

0

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.

Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27
  • this is how I'm doing right now. But when `applicationID` and `inputData `are present in case of edit, both condition are satisfied for `ngChanges` and `ngOnInit` respectively and multiple calls are made to fetch customer info. Before parent ngOnInit can resolve `inputData`, child's ngOnInit is called and hence, the condition is failed. – candidJ Aug 12 '18 at 09:23