Справочник API

Вот полный контракт board: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте board с помощью 5 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`board`	`Board`	`undefined`	Полное определение доски для отрисовки: объект, массив columns которого содержит данные колонок и карточек, отображаемые компонентом.
`boardLabel`	`string`	`'Board'`	Доступное имя контейнера списков доски.
`variant`	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| string`	`undefined`	Семантический акцент плейсхолдера перетаскивания. Принимает встроенные акценты дизайн-системы, имя любого зарегистрированного пользовательского акцента или буквальный цвет (#hex, rgb(), oklch(), именованный цвет CSS); если не задан, используется акцент primary.
`columnSortingDisabled`	`boolean`	`false`	Если true, изменение порядка колонок перетаскиванием отключено для всей доски.
`dragBehavior`	`'ghost' \| 'hide' \| 'collapse'`	`'collapse'`	Управляет тем, как выглядит перетаскиваемый элемент во время перетаскивания: 'ghost' оставляет его видимым с половинной непрозрачностью, 'hide' делает его невидимым, но сохраняет занимаемое место, а 'collapse' полностью убирает и элемент, и его место.

События

Реагируйте на то, что делает board, — 4 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`onCardClick`	`OutputEmitterRef<BoardCard>`	Испускает нажатую карточку при каждом клике по карточке внутри доски.
`onCardMoved`	`OutputEmitterRef<CardDragDropEvent>`	Вызывается, когда карточка перемещается — внутри своей колонки или в другую колонку — перетаскиванием указателем или с клавиатуры; предоставляет предыдущий и текущий индексы, а также исходную и целевую колонки.
`onColumnMoved`	`OutputEmitterRef<ColumnDragDropEvent>`	Вызывается при изменении порядка колонок перетаскиванием; предоставляет предыдущий и текущий индексы колонки.
`reachedEnd`	`OutputEmitterRef<ReachedEndEvent>`	Вызывается, когда тело колонки прокручено до самого низа; предоставляет индекс и данные колонки — позволяет реализовать бесконечную подгрузку при прокрутке.

Шаблоны

Сделайте его своим — 7 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`cardTpt`	Заменяет содержимое карточки по умолчанию. Контекст шаблона предоставляет item (карточку) и column (её колонку), поэтому привязка выглядит как 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`	Заменяет заголовок колонки по умолчанию. Контекст шаблона предоставляет column.	`<ng-template columnHeaderTpt let-column="column"> <h5>{{ column.title }}</h5> <span>{{ column.cards.length }} cards</span> </ng-template>`
`columnFooterTpt`	Добавляет подвал под содержимым колонки. Контекст шаблона предоставляет column; без шаблона подвал не отрисовывается.	`<ng-template columnFooterTpt let-column="column"> <button type="button" (click)="addCard(column)">Add card</button> </ng-template>`
`cardPlaceholder`	Пользовательская зона сброса, отображаемая при перетаскивании карточки. Контекст предоставляет card (перетаскиваемую карточку) и column (целевую колонку).	`<ng-template cardPlaceholder let-card="card" let-column="column"> <div class="drop-zone">Drop "{{ card?.title }}" in {{ column.title }}</div> </ng-template>`
`columnPlaceholder`	Пользовательская зона сброса, отображаемая при перетаскивании колонки. Контекст предоставляет column (перетаскиваемую колонку).	`<ng-template columnPlaceholder let-column="column"> <div class="drop-zone">Drop column here</div> </ng-template>`
`cardDragPreview`	Пользовательский элемент, следующий за курсором при перетаскивании карточки. Контекст предоставляет card и column (исходную колонку).	`<ng-template cardDragPreview let-card="card" let-column="column"> <div class="preview">{{ card.title }} — {{ column.title }}</div> </ng-template>`
`columnDragPreview`	Пользовательский элемент, следующий за курсором при перетаскивании колонки. Контекст предоставляет column.	`<ng-template columnDragPreview let-column="column"> <div class="preview">{{ column.title }}</div> </ng-template>`