A dropdown that lets users pick node(s) from a (possibly huge, lazily-loaded) tree. Data is supplied through a TreeSelectProvider — either an InMemoryTreeSelectProvider for static trees or a custom provider that pages a backend. <bs-tree-select> is a ControlValueAccessor, so it works with [(ngModel)] and formControlName. It must live inside a <bs-form>.
It has no shadow root. Anything you render into it — row templates, node templates, cell renderers — stays in the document, so your app's stylesheet, your own component styles and Bootstrap's utility classes reach it normally.
Its own CSS is scoped at build time onto a data-mps attribute, the same device Angular uses for _ngcontent, so it cannot leak out onto your markup.
The trade-off runs the other way: page CSS now reaches this component's internals, exactly as emulated encapsulation behaves everywhere else. ::part() and ::slotted() no longer address it — use ordinary CSS selectors instead.
Backed by an HTTP provider that calls /api/treeItems, /api/treeItems/{id}/children and /api/treeItems/search. Roots and children load lazily; typing queries the server. (Requires the demo backend running.)
mode="multiple" renders each selected node as a removable chip. This example uses an in-memory provider — no backend required.
mode="checkbox" with [cascadeSelect]="true" shows a checkbox per node and cascades selection down to descendants (and reflects indeterminate parents).
variant="button" renders the trigger as a button with the search box inside the panel. [showClear]="true" adds a clear affordance once something is selected.