layout.title

layout.subtitle

@ng-orbit/wizard

Wizard

A headless wizard controller for multi-step flows where the consumer keeps ownership of forms, layout, validation, and submission side effects.

Use orbitWizard for navigation state and completion rules, then pair it with your own form UI or an optional renderer package.

Install @ng-orbit/wizard

    pnpm add @ng-orbit/wizard @ng-orbit/wizard-kit

Import

    import { OrbitWizardDirective, type OrbitWizardStepDef } from '@ng-orbit/wizard';
import { OrbitWizardStepFormSyncDirective } from '@ng-orbit/wizard-kit';
@ng-orbit/wizard-render-material

Material

Renderer package for Angular Material teams that want a fast adoption path.

The renderer maps orbitWizard state to Material navigation components while the consumer still owns forms, step markup, and completion side effects.

  • Install Angular Material in the consuming app.
  • Provide your own step forms and sync validity through wizard-kit or manual setValid calls.

docs.shared.livePreview

Rendered inside the docs host using the real controller contract.

Material renderer integration

    import { ReactiveFormsModule } from '@angular/forms';
import { OrbitWizardDirective } from '@ng-orbit/wizard';
import { OrbitWizardStepFormSyncDirective } from '@ng-orbit/wizard-kit';
import { OrbitWizardRenderMaterialComponent } from '@ng-orbit/wizard-render-material';

<section orbitWizard #wizard="orbitWizard" [steps]="steps" (completed)="submit()">
  <orbit-wizard-render-material [wizard]="wizard">
    <form
      [formGroup]="accountForm"
      [orbitWizardStepFormSync]="wizard"
      orbitWizardStepId="account"
      [orbitWizardStepForm]="accountForm"
    >
      <!-- consumer-owned fields -->
    </form>
  </orbit-wizard-render-material>
</section>