Referencia API

Aquí tienes el contrato completo de board: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta board a tu gusto con 5 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`board`	`Board`	`undefined`	La definición completa del tablero a renderizar: un objeto cuyo array columns contiene los datos de columnas y tarjetas que muestra el componente.
`boardLabel`	`string`	`'Board'`	Nombre accesible del contenedor de listas del tablero.
`variant`	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| string`	`undefined`	Acento semántico del placeholder de drag-and-drop. Acepta los acentos integrados del sistema de diseño, cualquier nombre de acento personalizado registrado o un color literal (#hex, rgb(), oklch(), color CSS con nombre); si no se establece, usa por defecto el acento primary.
`columnSortingDisabled`	`boolean`	`false`	Cuando es true, se desactiva la reordenación de columnas mediante drag-and-drop en todo el tablero.
`dragBehavior`	`'ghost' \| 'hide' \| 'collapse'`	`'collapse'`	Controla el aspecto del elemento arrastrado durante el arrastre: 'ghost' lo mantiene visible a media opacidad, 'hide' lo hace invisible pero conserva su espacio y 'collapse' lo elimina por completo junto con su espacio.

Outputs

Reacciona a lo que hace board: 4 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`onCardClick`	`OutputEmitterRef<BoardCard>`	Emite la tarjeta pulsada cada vez que se hace clic en una tarjeta dentro del tablero.
`onCardMoved`	`OutputEmitterRef<CardDragDropEvent>`	Emite cuando una tarjeta se recoloca — dentro de su columna o hacia otra columna — mediante arrastre con el puntero o movimiento con teclado, con los índices anterior/actual y las columnas de origen/destino.
`onColumnMoved`	`OutputEmitterRef<ColumnDragDropEvent>`	Emite cuando las columnas se reordenan mediante drag-and-drop, con los índices de columna anterior y actual.
`reachedEnd`	`OutputEmitterRef<ReachedEndEvent>`	Emite cuando el cuerpo de una columna llega al final de su scroll, con el índice y los datos de la columna — habilita la carga por scroll infinito.

Templates

Hazlo tuyo — 7 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`cardTpt`	Sustituye el cuerpo por defecto de la tarjeta. El contexto de la plantilla expone item (la tarjeta) y column (la columna que la contiene), así que se enlaza con let-card="item".	`<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`	Sustituye la cabecera por defecto de la columna. El contexto de la plantilla expone column.	`<ng-template columnHeaderTpt let-column="column"> <h5>{{ column.title }}</h5> <span>{{ column.cards.length }} cards</span> </ng-template>`
`columnFooterTpt`	Añade un pie bajo el cuerpo de la columna. El contexto de la plantilla expone column; sin plantilla no se renderiza ningún pie.	`<ng-template columnFooterTpt let-column="column"> <button type="button" (click)="addCard(column)">Add card</button> </ng-template>`
`cardPlaceholder`	Zona de destino personalizada que se muestra mientras se arrastra una tarjeta. El contexto expone card (la tarjeta arrastrada) y column (la columna de destino).	`<ng-template cardPlaceholder let-card="card" let-column="column"> <div class="drop-zone">Drop "{{ card?.title }}" in {{ column.title }}</div> </ng-template>`
`columnPlaceholder`	Zona de destino personalizada que se muestra mientras se arrastra una columna. El contexto expone column (la columna arrastrada).	`<ng-template columnPlaceholder let-column="column"> <div class="drop-zone">Drop column here</div> </ng-template>`
`cardDragPreview`	Elemento personalizado que sigue al cursor mientras se arrastra una tarjeta. El contexto expone card y column (la columna de origen).	`<ng-template cardDragPreview let-card="card" let-column="column"> <div class="preview">{{ card.title }} — {{ column.title }}</div> </ng-template>`
`columnDragPreview`	Elemento personalizado que sigue al cursor mientras se arrastra una columna. El contexto expone column.	`<ng-template columnDragPreview let-column="column"> <div class="preview">{{ column.title }}</div> </ng-template>`