Stepper

import { Component } from '@angular/core';
import { WrStep, WrStepper } from 'ngwr/stepper';

@Component({ imports: [WrStep, WrStepper] })
export class MyComponent {}

<wr-stepper [(active)]="step">
  <wr-step label="Account">Account form…</wr-step>
  <wr-step label="Profile" description="Optional">Profile form…</wr-step>
  <wr-step label="Confirm">Review and submit…</wr-step>
</wr-stepper>

<wr-stepper #stepper [(active)]="step" linear>
  <wr-step label="One" [completed]="oneDone()">…</wr-step>
  <wr-step label="Two" [completed]="twoDone()">…</wr-step>
  <wr-step label="Three">…</wr-step>
</wr-stepper>

<button (click)="stepper.next()">Next</button>

<wr-stepper [(active)]="step" orientation="vertical">
  <wr-step label="Pick a plan">…</wr-step>
  <wr-step label="Billing">…</wr-step>
  <wr-step label="Done">…</wr-step>
</wr-stepper>