https://github.com/alexandroit/stackline-angular-multiselect-angular-22
Angular 22 StackBlitz playground for @stackline/angular-multiselect-dropdown
https://github.com/alexandroit/stackline-angular-multiselect-angular-22
stackline
Last synced: 9 days ago
JSON representation
Angular 22 StackBlitz playground for @stackline/angular-multiselect-dropdown
- Host: GitHub
- URL: https://github.com/alexandroit/stackline-angular-multiselect-angular-22
- Owner: alexandroit
- Created: 2026-06-04T00:05:26.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-06-05T00:05:22.000Z (30 days ago)
- Last Synced: 2026-06-05T01:08:00.268Z (30 days ago)
- Topics: stackline
- Language: JavaScript
- Homepage:
- Size: 1.47 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @stackline/angular-multiselect-dropdown Angular 22 Playground
Lightweight StackBlitz playground for the Angular 22 line of `@stackline/angular-multiselect-dropdown`.
This playground installs `@stackline/angular-multiselect-dropdown@22.0.4` against Angular `22.0.2`.
This project includes the full live test matrix in one Angular app. Each example is isolated in its own folder, Angular module, route, and data object:
```text
src/app/examples/basic/basic.module.ts
src/app/examples/basic/basic.component.ts
src/app/examples/basic/basic.component.html
src/app/examples/basic/basic.component.scss
src/app/examples/basic/basic.data.ts
```
The same pattern is used for every route.
Shared layout follows the same maintainable Angular shape:
```text
src/app/app.component.ts
src/app/app.component.html
src/app/app.component.scss
src/app/shared/example-source.component.ts
src/app/shared/example-source.component.html
src/app/shared/example-source.component.scss
```
- settings-only skin switching
- classic, material, dark, custom, and brand skins
- accessibility-focused keyboard and ARIA contract checks
- `aria-selected` plus `aria-checked` multiselect state checks
- template slot examples for custom badges, labels, items, headers, and empty states
- renderless/headless state helper examples for custom Angular HTML
- dialog and overflow clipping support with `tagToBody`
- search, single selection, grouping, templating, limits, lazy loading, virtual scrolling, events, and disabled states
## Routes
Every route has its own module, component, template, stylesheet, and data file.
| Example | Route |
| --- | --- |
| Basic usage | `/basic` |
| Keyboard contract | `/keyboard-contract` |
| ARIA state | `/aria-state` |
| Template slots | `/template-slots` |
| Headless + ARIA | `/headless-aria` |
| Single selection | `/single-selection` |
| Search filter | `/search-filter` |
| Custom search from API | `/custom-search-api` |
| Search filter by property | `/search-filter-by-property` |
| Search and add new item | `/search-add-new-item` |
| Group by | `/group-by` |
| Templating | `/templating` |
| Template-driven forms | `/template-driven-forms` |
| Reactive forms | `/reactive-forms` |
| Virtual scrolling | `/virtual-scrolling` |
| Lazy loading from API | `/lazy-loading-api` |
| Data from remote API | `/remote-data` |
| Using in list for loop | `/list-loop` |
| Using inside dialog | `/dialog` |
| Multiple dropdowns | `/multiple-dropdowns` |
| Load dynamic data | `/dynamic-data` |
| Methods | `/methods` |
| Events | `/events` |
| Disabled state | `/disabled` |
| Limit selection | `/limit-selection` |
| Limit badges | `/limit-badges` |
| Custom placeholder | `/custom-placeholder` |
| Styling | `/styling` |
## Run
```bash
npm install
npm start
```
`npm start` is StackBlitz-safe. It starts the Angular CLI dev server when the runtime supports Angular 22, and serves the committed preview build when the WebContainer Node version is older than Angular 22 requires.
Use this command when you specifically want the real Angular CLI dev server:
```bash
npm run dev
```
Angular 22 CLI requires Node `22.22.3+`, `24.15.0+`, or `26.0.0+`.
## StackBlitz
```text
https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-22?startScript=start
```
Open a specific route by adding `initialpath`:
```text
https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-22?startScript=start&initialpath=%2Fsearch-filter
```