argos/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html

<div class="data-management-plan-editor">
    <mat-horizontal-stepper [linear]="isLinear">
        <mat-step [stepControl]="firstStepFormGroup">
            <form [formGroup]="firstStepFormGroup">
                <ng-template matStepLabel>Fill out your name</ng-template>
                <auto-complete class="full-width" placeholder="{{'FORM-PAYMENT-ORDER.EDITOR.FIELDS.PROJECT' | translate}}" 
                [configuration]="dmpAutoCompleteConfiguration"
                    titleKey="label" 
                    [control]="firstStepFormGroup.get('dataManagementPlan')" 
                    [required]="true">
                </auto-complete>
                <div>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </form>
        </mat-step>
        <mat-step [stepControl]="secondFormGroup">
            <form [formGroup]="secondFormGroup">
                <ng-template matStepLabel>Fill out your address</ng-template>
                <mat-form-field>
                    <input matInput placeholder="Address" formControlName="secondCtrl" required>
                </mat-form-field>
                <div>
                    <button mat-button matStepperPrevious>Back</button>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </form>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>Done</ng-template>
            You are now done.
            <div>
                <button mat-button matStepperPrevious>Back</button>
            </div>
        </mat-step>
    </mat-horizontal-stepper>
</div>