Asymmetrik/ngx-starter

<asy-modal
    title="Add Team Members"
    okText="Add Users"
    [disableOk]="isSubmitting() || addedMembers().length === 0"
    (cancel)="cancel()"
    (ok)="submit()"
>
    <h3>Add users</h3>
    <div class="mb-3">
        <ng-select
            name="teamAdmin"
            appendTo="body"
            bindLabel="name"
            cdkFocusInitial
            placeholder="Search for user..."
            #selectDropdown
            [items]="typeaheadUsers()"
            [loading]="usersLoading()"
            [typeahead]="usersInput$"
            (change)="typeaheadOnSelect($event, selectDropdown)"
        >
            <ng-template let-item="item" ng-label-tmp />
        </ng-select>
    </div>

    <h3 class="pt-2">Set user roles</h3>

    <table
        class="table table-striped"
        aria-describedby="Set user roles"
        cdk-table
        [dataSource]="addedMembers()"
    >
        <ng-container cdkColumnDef="name">
            <th cdk-header-cell *cdkHeaderCellDef>Username</th>
            <td cdk-cell *cdkCellDef="let member">
                {{ member.name }}
            </td>
        </ng-container>
        <ng-container cdkColumnDef="username">
            <th cdk-header-cell *cdkHeaderCellDef>Username</th>
            <td cdk-cell *cdkCellDef="let member">
                {{ member.username }}
            </td>
        </ng-container>
        <ng-container cdkColumnDef="role">
            <th cdk-header-cell *cdkHeaderCellDef>Role</th>
            <td cdk-cell *cdkCellDef="let member">
                <button
                    class="btn btn-text dropdown-toggle p-0"
                    id="add-member-{{ member._id }}-role-menu-btn"
                    type="button"
                    attr.aria-controls="add-member-{{ member._id }}-role-menu"
                    [cdkMenuTriggerFor]="rolesMenu"
                >
                    <span class="me-1">{{ member.roleDisplay }}</span>
                </button>
                <ng-template #rolesMenu>
                    <div
                        class="dropdown-menu"
                        id="add-member-{{ member._id }}-role-menu"
                        attr.aria-labelledby="add-member-{{ member._id }}-role-menu-btn"
                        cdkMenu
                    >
                        @for (role of teamRoleOptions; track role) {
                            <button
                                class="dropdown-item"
                                type="button"
                                [value]="role.role"
                                cdkMenuItem
                                (cdkMenuItemTriggered)="updateRoleSelection(member, role.role)"
                            >
                                {{ role.label }}
                            </button>
                        }
                    </div>
                </ng-template>
            </td>
        </ng-container>
        <ng-container cdkColumnDef="actions">
            <th cdk-header-cell *cdkHeaderCellDef></th>
            <td cdk-cell *cdkCellDef="let index = index">
                <button
                    class="btn btn-link p-0"
                    type="button"
                    container="body"
                    ngbTooltip="Remove User"
                    placement="left"
                    (click)="remove(index)"
                >
                    <span class="fa-solid fa-lg fa-trash"></span>
                </button>
            </td>
        </ng-container>
        <tr cdk-header-row *cdkHeaderRowDef="columns"></tr>
        <tr cdk-row *cdkRowDef="let item; columns: columns"></tr>
    </table>
</asy-modal>