API-Referenz

Hier ist der vollständige Vertrag für board: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle board mit 5 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`board`	`Board`	`undefined`	Die vollständige Board-Definition zum Rendern: ein Objekt, dessen columns-Array die Spalten- und Kartendaten enthält, die die Komponente anzeigt.
`boardLabel`	`string`	`'Board'`	Zugänglicher Name des Listen-Containers des Boards.
`variant`	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| string`	`undefined`	Semantischer Akzent des Drag-and-Drop-Platzhalters. Akzeptiert die eingebauten Design-System-Akzente, jeden registrierten benutzerdefinierten Akzentnamen oder eine literale Farbe (#hex, rgb(), oklch(), benannte CSS-Farbe); ohne Angabe gilt der primäre Akzent.
`columnSortingDisabled`	`boolean`	`false`	Wenn true, ist das Umsortieren von Spalten per Drag-and-Drop für das gesamte Board deaktiviert.
`dragBehavior`	`'ghost' \| 'hide' \| 'collapse'`	`'collapse'`	Steuert, wie das gezogene Element während des Ziehens aussieht: 'ghost' hält es bei halber Deckkraft sichtbar, 'hide' macht es unsichtbar, behält aber seinen Platz, und 'collapse' entfernt es samt seinem Platz vollständig.

Outputs

Reagiere darauf, was board tut — 4 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`onCardClick`	`OutputEmitterRef<BoardCard>`	Gibt bei jedem Klick auf eine Karte innerhalb des Boards die angeklickte Karte aus.
`onCardMoved`	`OutputEmitterRef<CardDragDropEvent>`	Wird ausgelöst, wenn eine Karte — innerhalb ihrer Spalte oder in eine andere Spalte — per Zeiger-Drag oder Tastatur verschoben wird, mit vorherigem/aktuellem Index sowie Quell- und Zielspalte.
`onColumnMoved`	`OutputEmitterRef<ColumnDragDropEvent>`	Wird ausgelöst, wenn Spalten per Drag-and-Drop umsortiert werden, mit dem vorherigen und dem aktuellen Spaltenindex.
`reachedEnd`	`OutputEmitterRef<ReachedEndEvent>`	Wird ausgelöst, wenn ein Spaltenkörper bis zum Ende gescrollt wird, mit Spaltenindex und -daten — ermöglicht Infinite-Scroll-Laden.

Templates

Mach es zu deinem — 7 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`cardTpt`	Ersetzt den Standardinhalt der Karte. Der Template-Kontext stellt item (die Karte) und column (die zugehörige Spalte) bereit, daher let-card="item" binden.	`<hub-board [board]="board()"> <ng-template cardTpt let-card="item" let-column="column"> <strong>{{ card.title }}</strong> <small>{{ column.title }}</small> </ng-template> </hub-board>`
`columnHeaderTpt`	Ersetzt den Standard-Spaltenkopf. Der Template-Kontext stellt column bereit.	`<ng-template columnHeaderTpt let-column="column"> <h5>{{ column.title }}</h5> <span>{{ column.cards.length }} cards</span> </ng-template>`
`columnFooterTpt`	Fügt unter dem Spalteninhalt eine Fußzeile ein. Der Template-Kontext stellt column bereit; ohne Template wird keine Fußzeile gerendert.	`<ng-template columnFooterTpt let-column="column"> <button type="button" (click)="addCard(column)">Add card</button> </ng-template>`
`cardPlaceholder`	Eigene Ablagezone, die beim Ziehen einer Karte angezeigt wird. Der Kontext stellt card (die gezogene Karte) und column (die Zielspalte) bereit.	`<ng-template cardPlaceholder let-card="card" let-column="column"> <div class="drop-zone">Drop "{{ card?.title }}" in {{ column.title }}</div> </ng-template>`
`columnPlaceholder`	Eigene Ablagezone, die beim Ziehen einer Spalte angezeigt wird. Der Kontext stellt column (die gezogene Spalte) bereit.	`<ng-template columnPlaceholder let-column="column"> <div class="drop-zone">Drop column here</div> </ng-template>`
`cardDragPreview`	Eigenes Element, das beim Ziehen einer Karte dem Cursor folgt. Der Kontext stellt card und column (die Ausgangsspalte) bereit.	`<ng-template cardDragPreview let-card="card" let-column="column"> <div class="preview">{{ card.title }} — {{ column.title }}</div> </ng-template>`
`columnDragPreview`	Eigenes Element, das beim Ziehen einer Spalte dem Cursor folgt. Der Kontext stellt column bereit.	`<ng-template columnDragPreview let-column="column"> <div class="preview">{{ column.title }}</div> </ng-template>`