Installation
import { WrTransfer } from 'ngwr/transfer';
@Component({ imports: [WrTransfer] })
export class MyComponent {}Basic usage
[items] is the full set; [(value)] holds the values that ended up on the right, and everything else stays on the left. Ticking a row only stages it — the move commits when you press an arrow, so the value never contains a half-made choice. A disabled item can be neither ticked nor swept up by the header checkbox.
<wr-transfer [items]="permissions" [(value)]="granted" />Search and titles
searchable puts a filter above each pane; it narrows what you see, what the header checkbox sweeps and what an arrow commits, never what is already chosen. A row the filter hides stops counting as staged, so a move can only carry rows the pane is actually showing. sourceTitle / targetTitle name the panes — both fall back to the ngwr/i18n catalog, so they are localized without being set.
<wr-transfer
searchable
sourceTitle="All permissions"
targetTitle="Granted"
[items]="permissions"
[(value)]="granted"
/>In a form
A Signal Forms native control — [formField] binds straight to value, with no ControlValueAccessor in between. [(ngModel)] and reactive forms keep working through Angular's bridge, and (touch) fires on every committed move so a bound field marks itself touched.
<!-- Signal Forms — the value is the right pane -->
<wr-transfer [items]="permissions" [formField]="form.granted" />
<!-- Classic reactive forms keep working through Angular's bridge -->
<wr-transfer [items]="permissions" [formControl]="granted" />API
| Name | Description | Type | Default |
|---|---|---|---|
items | Every row, in either pane. Membership of the right pane is value. | readonly WrTransferItem[] | [] |
value | Values currently in the RIGHT pane. Two-way bindable; bound automatically by [formField] / [(ngModel)]. | readonly unknown[] | [] |
(touch) | Emitted on blur / commit so a bound field marks itself touched. | void | — |
disabled | Disable the whole control. | boolean | false |
readonly | Refuse changes to the value while both panes stay focusable and readable. Bound automatically from the field's readonly state when used with [formField]. The move buttons go inert and the row checkboxes go read-only; SEARCH keeps working, because filtering a pane changes what is shown and not what is chosen. No aria-readonly on the host: role group does not support the state, so each row's checkbox mirrors its own instead. | boolean | false |
searchable | Show a filter box above each pane. | boolean | false |
sourceTitle | Heading above the left pane. Falls back to transfer.source. | string | null | null |
targetTitle | Heading above the right pane. Falls back to transfer.target. | string | null | null |
searchPlaceholder | Placeholder in both filter boxes. Falls back to transfer.search. | string | null | null |
emptyText | Shown in a pane with no rows. Falls back to transfer.empty. | string | null | null |
selectAllLabel | Accessible name of each pane's select-all checkbox, composed with the pane heading. Falls back to transfer.selectAll. | string | null | null |
toTargetLabel | Accessible name of the move-right button. Falls back to transfer.toTarget. | string | null | null |
toSourceLabel | Accessible name of the move-left button. Falls back to transfer.toSource. | string | null | null |
CSS variables
Custom properties ngwr/transfer publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-transfer-pane-height | 15rem | .wr-transfer |
--wr-transfer-pane-width | 14rem | .wr-transfer |