Clash Royale CLAN TAG#URR8PPP

How to share data across various steps of the stepper component?

Is there a way I could share data across various steps of the stepper component?

For example, in the code below, I want the data filled in the form of app-step1 to be available in the app-step2 component.

app-step1

app-step2

<mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper" >
<mat-step [stepControl]="zerpFormGroup" >
<ng-template matStepLabel>Step I</ng-template>
<app-step1 [stepper]="stepper"></app-step1>
</mat-step>
<mat-step [stepControl]="firstFormGroup" >
<ng-template matStepLabel ">Step II</ng-template><br>
<app-step2 [stepper]="stepper"></app-step2>
</mat-step>


2 Answers
2

You could use the @input decorator to declare an input property and bind the same variable to both components:

<mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper" >
<mat-step [stepControl]="zerpFormGroup" >
<ng-template matStepLabel>Step I</ng-template>
<app-step1 [stepper]="stepper" [sharedProperty]="someExpresion"></app-step1>
</mat-step>
<mat-step [stepControl]="firstFormGroup" >
<ng-template matStepLabel ">Step II</ng-template><br>
<app-step2 [stepper]="stepper" [sharedProperty]="someExpresion"></app-step2>
</mat-step>


Then in both your app-step1 and app-step2 components you declare that input property like this:

app-step1

app-step2

@Input sharedProperty;


For more information you can see a more detailed example in Angular docs.

Resovled this. Used a combination of @Output/@Input. @Output decorator used in the child component 1 along with EventEmitter. This event emitter emits the value in the field I want to pass along which is then caught in the parent component(in this case my stepper component. This value is then passed down to child component 2 using the @Input decorator.

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.