Stepper component

step.components.ts

import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-step',
  template: '<ng-template><ng-content></ng-content></ng-template>',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class StepComponent {
  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<any>;
}

stepper.component.ts

import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList, ViewEncapsulation } from '@angular/core';

import { StepComponent } from './step.component';

@Component({
  selector: 'app-stepper',
  templateUrl: '<ng-container *ngIf="this.getCurrentStepComponent() as stepCmp" [ngTemplateOutlet]="stepCmp.content"></ng-container>
',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class StepperComponent {
  @ContentChildren(StepComponent) steps!: QueryList<StepComponent>;

  @Input() currentStep = 1;

  getCurrentStepComponent() {
    return this.steps.find((_, idx) => idx === this.getCurrentStepIndex());
  }

  private getCurrentStepIndex() {
    return this.currentStep - 1;
  }
}