Is it possible to have a linear stepper where the individual steps are separate components? (Yes)

[Shaun Moran]

It is possible to separate steps into components, but you cannot assign the stepControl out-of-the-box. The stepControl is necessary to bind the validation status to the material stepper. This will allow the steps to be unclickable until they are valid. We had this problem, and found a working solution after several days of trial and error. Basically since the steps are divided into several components that each define a form, and that their corresponding stepControl must be in the parent, the FormGroup in the child component must be sent to the parent component that defines the stepper, for the purpose of setting the stepControl(s) with these FormGroups. After creating the FormGroup, emit an event and have the parent listen to that event, and pass the FormGroup through that event. You can apply this for all children, creating a seperate event for each and a seperate listener in the parent for each emitter.

                                                                                                                                                                                   

**In child component:**                                                                                                                                                                

1- declare the event                                                                                                                                                               

    @Output() notify: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();                                                                                                         

                                                                                                                                                                                   

2- emit the formGroup to the parent component                                                                                                                                      

    this.notify.emit(this.myFormGroup);                                                                                                                                                

                                                                                                                                                                                   

**In the parent component containing the mat-stepper's stepControl(s):**

1- In the component(.ts), add a function that will receive and set the formgroup:

    myFormGroup: FormGroup;

    onNotify(formGroup: FormGroup): void {

        this.myFormGroup = formGroup;

    }

2- In the html, add the notification listener:

    <mat-step [completed]="false" [stepControl]="myFormGroup">

      <ng-template matStepLabel>Step 1</ng-template>

      <app-child (notify)='onNotify($event)'></app-child>

    </mat-step>                                                                                                                                            

   

nested components explanations: https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/