API リファレンス

breadcrumbs の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

3 個のインプットで breadcrumbs を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`breadcrumbs$`	`Observable<BreadcrumbItem[]>`	—	ルートデータから自動生成されるパンくず項目の Observable ストリーム。
`variant`	`string`	—	パンくずリンクのセマンティックアクセント（primary、success など）または任意のカスタムトークン名。
`truncateItems`	`boolean`	`false`	true の場合、各ラベルを --hub-breadcrumb-max-item-width で省略記号付きに切り詰め、あふれたときにツールチップを表示します。

アウトプットはまだドキュメント化されていません。

自分好みに — 1 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`hubBreadcrumbItem`	個々のパンくず項目をレンダリングするためのカスタムテンプレート	`<ng-template hubBreadcrumbItem let-item let-isLast="isLast"> @if (!isLast) { <a [routerLink]="item.url" class="breadcrumb-link">{{ item.label }}</a> } @else { <span class="breadcrumb-current">{{ item.label }}</span> } </ng-template>`