CdkStepper

npm install @angular/cdk

import {CdkStepperModule} from '@angular/cdk/stepper';

import {Component} from '@angular/core';
import {CdkStepper} from '@angular/cdk/stepper';

@Component({
  selector: 'app-custom-stepper',
  template: `
    <section class="stepper-header">
      <div *ngFor="let step of steps; let i = index"
           [class.active]="selectedIndex === i"
           (click)="selectStepByIndex(i)">
        Step {{ i + 1 }}
      </div>
    </section>
    
    <div class="stepper-content">
      <ng-container [ngTemplateOutlet]="selected?.content"></ng-container>
    </div>
    
    <div class="stepper-actions">
      <button (click)="previous()" [disabled]="!hasPrevious()">
        Previous
      </button>
      <button (click)="next()" [disabled]="!hasNext()">
        Next
      </button>
    </div>
  `,
  providers: [{provide: CdkStepper, useExisting: CustomStepper}]
})
export class CustomStepper extends CdkStepper {}

@Component({
  selector: 'app-stepper-example',
  template: `
    <app-custom-stepper>
      <cdk-step><ng-template>Step 1 Content</ng-template></cdk-step>
      <cdk-step><ng-template>Step 2 Content</ng-template></cdk-step>
      <cdk-step><ng-template>Step 3 Content</ng-template></cdk-step>
    </app-custom-stepper>
  `,
})
export class StepperExample {}

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  template: `
    <app-custom-stepper>
      <cdk-step [stepControl]="personalForm">
        <ng-template>
          <form [formGroup]="personalForm">
            <input formControlName="name" placeholder="Name">
          </form>
        </ng-template>
      </cdk-step>
      
      <cdk-step [stepControl]="addressForm">
        <ng-template>
          <form [formGroup]="addressForm">
            <input formControlName="address" placeholder="Address">
          </form>
        </ng-template>
      </cdk-step>
    </app-custom-stepper>
  `,
})
export class FormStepperExample {
  personalForm: FormGroup;
  addressForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.personalForm = this.fb.group({
      name: ['', Validators.required]
    });
    this.addressForm = this.fb.group({
      address: ['', Validators.required]
    });
  }
}