Angular ステッパーコンポーネント | ng-hub-ui-stepper
バリデーション、向きのモード、カスタムコントロール、i18n、CSS 変数テーマを備えた Angular ステッパーコンポーネント。
Overview
Why teams search for this library
バリデーション、進行ルール、ブランディングを自分の制御下に保ちたい、ガイド付きの複数ステップフローに、この Angular ステッパーコンポーネントは役立ちます。
Install
npm install ng-hub-ui-stepperJump to
Ideal for
- チェックアウトフロー
- ウィザードフォーム
- オンボーディング
- 設定ステップ
About stepper
ng-hub-ui-stepper は、Angular アプリケーションがオンボーディング、チェックアウト、ウィザード型のフォームを構造化できるよう支援します。これらのルールを各フローに手作業で組み込むことなく、ステップの進行・バリデーション・ナビゲーションのロジックを制御する再利用可能な手段をチームに提供します。
Feature guides
基本的な利用
基本的なセットアップと向きの動作。
Examples:
基本的な使い方
基本的な使い方
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
向き
向き
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
高度なフロー
バリデーション、i18n、RTL、API 駆動のナビゲーション、カスタムコントロール、カスタムステップヘッダー。
Examples:
バリデーション
バリデーション
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
プログラムによる制御
プログラムによる制御
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Event: -
カスタムナビゲーション
カスタムナビゲーション
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
カスタムコントロール
カスタムコントロール
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
アニメーション
アニメーション
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
国際化（i18n）
国際化（i18n）
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
右から左（RTL）
右から左（RTL）
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
スタイリング
テーマサービスによるランタイムのテーマカスタマイズ。
Examples:
テーマ設定
テーマ設定
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Key features
Recent changes
Version 21.2.0 - 3/19/26, 12:00 AM
added: StepperAnimationDirection enum exported for typed animation direction values.
added: Step indexes are now automatically assigned by StepperComponent via a reactive effect — no manual [index] binding required.
changed: StepComponent.index is now an internal writable signal. Remove all [index]="N" bindings from hub-step templates.
changed: StepComponent.disabled simplified to a direct signal input (input(false)), removing the getter/setter and disabled$ backing signal.
changed: StepperComponent.currentIndex is now a writable signal — call as currentIndex() instead of the previous getter.
changed: Renamed internal signals: removed $ suffix from currentIndex, contentAnimating, animationDirection.
removed: StepComponent.disabled$ backing signal removed. Use the disabled signal input directly.
removed: [index] template binding removed from StepComponent — managed internally.
Version 21.1.0 - 3/18/26, 12:00 AM
added: Angular 21 support with Signals-based architecture.
added: contentChild and contentChildren for step and directive discovery.
changed: All components and directives converted to standalone.
fixed: Fixed step indices and validation during dynamic step additions.