Asymmetrik/ngx-starter

<div class="text-nowrap mb-1">
    (
    <button class="btn btn-sm btn-link" type="button" (click)="restoreDefault()">Default</button>
    /
    <button class="btn btn-sm btn-link" type="button" (click)="selectAll()">All</button>
    )
</div>

<div
    class="overflow-auto ms-n1 column-drag-boundary"
    cdkDropList
    [cdkDropListData]="_columns"
    (cdkDropListDropped)="onDrop($event)"
>
    @for (column of _columns; track column) {
        <div
            class="form-check text-nowrap ms-1"
            cdkDrag
            cdkDragBoundary=".column-drag-boundary"
            [cdkDragData]="column"
            [cdkDragDisabled]="sortingDisabled()"
        >
            @if (!sortingDisabled()) {
                <span class="fa-solid fa-lg fa-bars pe-1 me-2" cdkDragHandle></span>
            }
            <input
                class="form-check-input"
                id="column-chooser-{{ column.key }}-checkbox"
                type="checkbox"
                [(ngModel)]="column.selected"
                (change)="onChange()"
            />
            <label class="form-check-label" for="column-chooser-{{ column.key }}-checkbox">
                {{ column.label || (column.key | titlecase) }}
            </label>
        </div>
    }
</div>