A select that opens the next column when you choose a parent. The form value is the path of values. ply-select-tree is the other shape: one expandable list, one selected node.
Unlock it plus 92 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Choosing a parent reveals the next column. Choosing a leaf writes the full path and closes the panel.
Path: []
<ply-cascade-select [options]="regions" [(ngModel)]="city" placeholder="Choose a city" clearable></ply-cascade-select>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add cascade-select
// Paths are relative to aliases.components (default: src/app/components)
import { CascadeNode, CascadeSelectComponent } from './cascade-select/cascade-select.component';
@Component({
selector: 'app-cascade-select-example',
imports: [
CascadeSelectComponent
],
template: `...`
})
export class CascadeSelectExampleComponent {}Install
npx ply-ui-cli add cascade-select
changeOnSelect writes the path as soon as a parent is chosen. The next column stays open so a leaf can replace it.
Path: []
<ply-cascade-select [options]="regions" [(ngModel)]="region" changeOnSelect></ply-cascade-select>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add cascade-select
// Paths are relative to aliases.components (default: src/app/components)
import { CascadeNode, CascadeSelectComponent } from './cascade-select/cascade-select.component';
@Component({
selector: 'app-cascade-select-example',
imports: [
CascadeSelectComponent
],
template: `...`
})
export class CascadeSelectExampleComponent {}Install
npx ply-ui-cli add cascade-select
npx ply-ui-cli add cascade-select
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add cascade-select
// Paths are relative to aliases.components (default: src/app/components)
import { CascadeNode, CascadeSelectComponent } from './cascade-select/cascade-select.component';
@Component({
selector: 'app-your-component',
imports: [
CascadeSelectComponent
],
template: `...`
})
export class YourComponent {} API for cascade-select — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
CascadeNode | label | string | — | Text shown in the column and in the trigger. |
CascadeNode | value | string | — | Value stored in the path. |
CascadeNode | children | CascadeNode[] | — | Next column. A node without children is a leaf. |
CascadeNode | disabled | boolean | — | When true, the option cannot be chosen. |
ply-cascade-select | class | string | '' | Extra host classes merged via `cn()`. |
ply-cascade-select | options | CascadeNode[] | [] | Root options. Each `children` array is the next column. |
ply-cascade-select | placeholder | unknown | 'Select…' | Placeholder shown when the path is empty. |
ply-cascade-select | changeOnSelect | boolean | false | When true, choosing a parent writes that path and keeps the panel open. Leaves always write the path and close the panel. |
ply-cascade-select | clearable | boolean | false | Shows a clear control when a path is selected. |
ply-cascade-select | disabled | boolean | false | Disables the control. Forms also set this through `setDisabledState`. |
ply-cascade-select | (selectionChange) | string[] | null | — | Emitted with the value path, or `null` when cleared. |
Content