@stackline/angular-multiselect-dropdown 2.0.4 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +259 -218
  2. package/multiselect.component.css +180 -39
  3. package/package.json +6 -18
  4. package/src/app/angular2-multiselect-dropdown/multiselect.component.html +2 -1
  5. package/src/app/angular2-multiselect-dropdown/multiselect.component.scss +157 -38
  6. package/src/app/angular2-multiselect-dropdown/multiselect.component.ts +36 -4
  7. package/src/app/angular2-multiselect-dropdown/multiselect.interface.ts +1 -0
  8. package/multiselect.component.css.map +0 -1
package/README.md CHANGED
@@ -1,279 +1,320 @@
1
1
  # @stackline/angular-multiselect-dropdown
2
2
 
3
- > A maintained Angular multiselect dropdown for classic Angular forms workflows, with search, grouping, custom item and badge templates, lazy loading, custom CSS/SCSS theming, and support for both template-driven and reactive forms.
3
+ Angular 2 multiselect dropdown component for web applications. Easy to integrate and use.
4
4
 
5
- [![npm version](https://img.shields.io/npm/v/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
6
- [![npm downloads](https://img.shields.io/npm/dt/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
7
- [![npm monthly](https://img.shields.io/npm/dm/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
8
- [![license](https://img.shields.io/npm/l/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/angular-multiselect-dropdown/blob/master/LICENSE)
9
- [![Angular 2](https://img.shields.io/badge/Angular-2.x-red?style=flat-square&logo=angular)](https://alexandro.net/docs/angular/multiselect/angular-2/)
10
- [![TypeScript](https://img.shields.io/badge/TypeScript-2.4-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org)
11
- [![GitHub stars](https://img.shields.io/github/stars/alexandroit/angular-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/angular-multiselect-dropdown/stargazers)
5
+ ## Compatibility
12
6
 
13
- **[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 2 Demo](https://alexandro.net/docs/angular/multiselect/angular-2/)** | **[npm](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/angular-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/angular-multiselect-dropdown)**
7
+ This package version is compatible with Angular 2.x and was tested in a real Angular 2.4.10 application.
14
8
 
15
- **Latest tested npm release:** `2.0.4` for Angular `2.x`
9
+ - Package: `@stackline/angular-multiselect-dropdown@2.0.6`
10
+ - Angular peer range: `>=2.0.0 <3.0.0`
11
+ - Tested Angular runtime: `2.4.10`
16
12
 
17
- ---
13
+ ## Table of Contents
14
+ ##### 1. Getting Started
15
+ ##### 2. Installation
16
+ ##### 3. Usage
17
+ ##### 4. Templates
18
+ ##### 5. Template Driven Forms support
19
+ ##### 5. Reactive Forms support
20
+ ##### 6. Settings configuration
21
+ ##### 7. Callbacks and events
22
+ ##### 8. Lazy lodaing - handle large data lists
23
+ ##### 9. Group By feature
24
+ ##### 10. Search filter for both plain list and grouped list
18
25
 
19
- > **Credits:** Original upstream copyright is preserved in the license. Current maintenance, Angular line stewardship, publishing, and documentation by [Alexandro Paixao Marques](https://github.com/alexandroit/angular-multiselect-dropdown).
20
26
 
21
- ---
22
27
 
23
- ## Why this library?
24
28
 
25
- The original `angular2-multiselect-dropdown` package became difficult to keep current across multiple Angular generations. This maintained package keeps the classic API and template structure intact, introduces the new primary selector `<angular-multiselect>`, preserves the legacy alias `<angular2-multiselect>`, and publishes the project line by line so older applications can keep a predictable upgrade path.
26
29
 
27
- The repository contains the full documentation matrix from Angular 2 through Angular 21. The current public npm release is `2.0.4` for Angular 2.x applications.
30
+ ## Getting Started
31
+ ### Installation
32
+ - The Mutiselect Dropdown package is published as `@stackline/angular-multiselect-dropdown`.
33
+ - Install the tested Angular 2 package:
34
+ `npm install @stackline/angular-multiselect-dropdown@2.0.6`
28
35
 
29
- The Angular 2 package is compatible with Angular 2.x and was tested in a real Angular 2.4.10 application before publication.
36
+ - Once installed import `AngularMultiSelectModule` from the installed package into your module as follows:
30
37
 
31
- ## Features
38
+ ### Theme option
32
39
 
33
- | Feature | Supported |
34
- | :--- | :---: |
35
- | Angular 2 tested published release line | ✅ |
36
- | Multi-select and single-select modes | ✅ |
37
- | Search and filter | ✅ |
38
- | Group by field | ✅ |
39
- | Custom item templates (`<c-item>`) | ✅ |
40
- | Custom badge templates (`<c-badge>`) | ✅ |
41
- | Template-driven forms (`ngModel`) | ✅ |
42
- | Reactive forms (`formControlName`) | ✅ |
43
- | Lazy loading and remote-data hooks | ✅ |
44
- | Theming via bundled CSS/SCSS | ✅ |
45
- | Primary selector `<angular-multiselect>` | ✅ |
46
- | Legacy selector `<angular2-multiselect>` | ✅ |
47
- | Versioned docs builds per Angular line | ✅ |
40
+ The package ships four built-in skins:
48
41
 
49
- ## Table of Contents
42
+ - `classic` keeps the original compact layout and is the default.
43
+ - `material` enables the rounded chip and list-item spacing skin.
44
+ - `dark` uses the Material layout with dark surfaces for dark-mode screens.
45
+ - `custom` uses the Material layout and reads CSS custom properties from your app.
50
46
 
51
- 1. [Rename Note](#rename-note)
52
- 2. [Angular Version Compatibility](#angular-version-compatibility)
53
- 3. [Installation](#installation)
54
- 4. [Setup](#setup)
55
- 5. [Custom CSS and SCSS Themes](#custom-css-and-scss-themes)
56
- 6. [Basic Usage](#basic-usage)
57
- 7. [Custom Templates](#custom-templates)
58
- 8. [Forms Integration](#forms-integration)
59
- 9. [Lazy Loading and Remote Data](#lazy-loading-and-remote-data)
60
- 10. [Events](#events)
61
- 11. [Run Locally](#run-locally)
62
- 12. [License](#license)
63
-
64
- ## Rename Note
65
-
66
- - new package: `@stackline/angular-multiselect-dropdown`
67
- - previous package: `@stackline/angular2-multiselect-dropdown`
68
- - primary selector: `<angular-multiselect>`
69
- - legacy alias still accepted: `<angular2-multiselect>`
70
-
71
- ## Angular Version Compatibility
72
-
73
- Each package family only installs on its matching Angular family. Framework major and package major are not always the same package number, so use the package family column below.
74
-
75
- | Package family | Framework family | Peer range | Tested release window | Demo link |
76
- | :---: | :---: | :---: | :---: | :--- |
77
- | **21.x** | **Angular 21 only** | **`>=21.0.0 <22.0.0`** | **21.0.0 -> 21.2.8** | [Angular 21 family docs](https://alexandro.net/docs/angular/multiselect/angular-21/) |
78
- | **20.x** | **Angular 20 only** | **`>=20.0.0 <21.0.0`** | **20.0.0 -> 20.3.18** | [Angular 20 family docs](https://alexandro.net/docs/angular/multiselect/angular-20/) |
79
- | **19.x** | **Angular 19 only** | **`>=19.0.0 <20.0.0`** | **19.0.0 -> 19.2.20** | [Angular 19 family docs](https://alexandro.net/docs/angular/multiselect/angular-19/) |
80
- | **18.x** | **Angular 18 only** | **`>=18.0.0 <19.0.0`** | **18.0.0 -> 18.2.14** | [Angular 18 family docs](https://alexandro.net/docs/angular/multiselect/angular-18/) |
81
- | **17.x** | **Angular 17 only** | **`>=17.0.0 <18.0.0`** | **17.0.0 -> 17.3.12** | [Angular 17 family docs](https://alexandro.net/docs/angular/multiselect/angular-17/) |
82
- | **16.x** | **Angular 16 only** | **`>=16.0.0 <17.0.0`** | **16.0.0 -> 16.2.12** | [Angular 16 family docs](https://alexandro.net/docs/angular/multiselect/angular-16/) |
83
- | **15.x** | **Angular 15 only** | **`>=15.0.0 <16.0.0`** | **15.0.0 -> 15.2.10** | [Angular 15 family docs](https://alexandro.net/docs/angular/multiselect/angular-15/) |
84
- | **14.x** | **Angular 14 only** | **`>=14.0.0 <15.0.0`** | **14.0.0 -> 14.3.0** | [Angular 14 family docs](https://alexandro.net/docs/angular/multiselect/angular-14/) |
85
- | **13.x** | **Angular 13 only** | **`>=13.0.0 <14.0.0`** | **13.0.0 -> 13.4.0** | [Angular 13 family docs](https://alexandro.net/docs/angular/multiselect/angular-13/) |
86
- | **12.x** | **Angular 12 only** | **`>=12.0.0 <13.0.0`** | **12.0.0 -> 12.2.17** | [Angular 12 family docs](https://alexandro.net/docs/angular/multiselect/angular-12/) |
87
- | **11.x** | **Angular 11 only** | **`>=11.0.0 <12.0.0`** | **11.0.0 -> 11.2.14** | [Angular 11 family docs](https://alexandro.net/docs/angular/multiselect/angular-11/) |
88
- | **10.x** | **Angular 10 only** | **`>=10.0.0 <11.0.0`** | **10.0.0 -> 10.2.5** | [Angular 10 family docs](https://alexandro.net/docs/angular/multiselect/angular-10/) |
89
- | **9.x** | **Angular 9 only** | **`>=9.0.0 <10.0.0`** | **9.0.0 -> 9.1.13** | [Angular 9 family docs](https://alexandro.net/docs/angular/multiselect/angular-9/) |
90
- | **8.x** | **Angular 8 only** | **`>=8.0.0 <9.0.0`** | **8.0.0 -> 8.2.14** | [Angular 8 family docs](https://alexandro.net/docs/angular/multiselect/angular-8/) |
91
- | **7.x** | **Angular 7 only** | **`>=7.0.0 <8.0.0`** | **7.0.0 -> 7.2.16** | [Angular 7 family docs](https://alexandro.net/docs/angular/multiselect/angular-7/) |
92
- | **6.x** | **Angular 6 only** | **`>=6.0.0 <7.0.0`** | **6.0.0 -> 6.1.10** | [Angular 6 family docs](https://alexandro.net/docs/angular/multiselect/angular-6/) |
93
- | **5.x** | **Angular 5 only** | **`>=5.0.0 <6.0.0`** | **5.0.0 -> 5.2.11** | [Angular 5 family docs](https://alexandro.net/docs/angular/multiselect/angular-5/) |
94
- | **4.x** | **Angular 4 only** | **`>=4.0.0 <5.0.0`** | **4.0.0 -> 4.4.7** | [Angular 4 family docs](https://alexandro.net/docs/angular/multiselect/angular-4/) |
95
- | **2.x** | **Angular 2 only** | **`>=2.0.0 <3.0.0`** | **compatible with 2.x; tested on 2.4.10** | [Angular 2 family docs](https://alexandro.net/docs/angular/multiselect/angular-2/) |
96
-
97
-
98
- ## Installation
99
-
100
- ```bash
101
- npm install @stackline/angular-multiselect-dropdown@2.0.4
47
+ ```js
48
+ this.dropdownSettings = {
49
+ text: 'Select Countries',
50
+ enableSearchFilter: true,
51
+ theme: 'material'
52
+ };
102
53
  ```
103
54
 
104
- Install `2.0.4` for Angular 2.x applications. This patch keeps the tested Angular 2 behavior and updates the published README, package metadata, and documentation links.
105
-
106
- ## Setup
55
+ To change the skin at runtime, only update `settings.theme` or `settings.skin`.
56
+ No other template or data customization is required:
107
57
 
108
- ### 1. Import the module
109
-
110
- ```ts
111
- import { NgModule } from '@angular/core';
112
- import { BrowserModule } from '@angular/platform-browser';
113
- import { FormsModule } from '@angular/forms';
114
- import { AngularMultiSelectModule } from '@stackline/angular-multiselect-dropdown';
115
-
116
- @NgModule({
117
- imports: [
118
- BrowserModule,
119
- FormsModule,
120
- AngularMultiSelectModule
121
- ]
122
- })
123
- export class AppModule {}
58
+ ```js
59
+ this.dropdownSettings.theme = 'dark';
124
60
  ```
125
61
 
126
- ### 2. Add the default theme
62
+ The component adds `theme-{name}` to the internal `.stackline-dropdown` element.
63
+ That means any new skin can follow the same pattern:
127
64
 
128
- ```json
129
- "styles": [
130
- "node_modules/@stackline/angular-multiselect-dropdown/themes/default.theme.css"
131
- ]
65
+ ```js
66
+ this.dropdownSettings = {
67
+ text: 'Select Countries',
68
+ enableSearchFilter: true,
69
+ theme: 'brand'
70
+ };
132
71
  ```
133
72
 
134
- ## Custom CSS and SCSS Themes
135
-
136
- The package also ships a full custom starter theme in both formats:
137
-
138
- - `node_modules/@stackline/angular-multiselect-dropdown/themes/custom.theme.scss`
139
- - `node_modules/@stackline/angular-multiselect-dropdown/themes/custom.theme.css`
140
-
141
- Use the `scss` file when you want to take over the component styles completely and keep the theme in your app source:
142
-
143
- ```json
144
- "styles": [
145
- "src/styles.scss",
146
- "src/styles/multiselect-dropdown.theme.scss"
147
- ]
73
+ ```css
74
+ .stackline-dropdown.theme-brand {
75
+ --stackline-ms-primary: #7c3aed;
76
+ --stackline-ms-primary-soft: rgba(124, 58, 237, 0.14);
77
+ --stackline-ms-surface: #ffffff;
78
+ --stackline-ms-surface-soft: #f5f3ff;
79
+ --stackline-ms-outline: #c4b5fd;
80
+ --stackline-ms-outline-strong: #7c3aed;
81
+ --stackline-ms-on-surface: #22183f;
82
+ --stackline-ms-on-surface-muted: #6b5d80;
83
+ --stackline-ms-chip-bg: #ede9fe;
84
+ --stackline-ms-chip-text: #5b21b6;
85
+ --stackline-ms-chip-remove: #5b21b6;
86
+ --stackline-ms-divider: rgba(124, 58, 237, 0.16);
87
+ --stackline-ms-section-bg: #faf5ff;
88
+ }
148
89
  ```
149
90
 
150
- Start `src/styles/multiselect-dropdown.theme.scss` from the package file above and edit the selectors and tokens freely.
151
-
152
- Use the `css` file when you want a plain compiled starter that can be copied and adjusted without a Sass pipeline.
91
+ For the built-in `custom` skin, define the `--stackline-ms-*` variables on a
92
+ parent element or globally:
93
+
94
+ ```css
95
+ .orders-filter {
96
+ --stackline-ms-primary: #b45309;
97
+ --stackline-ms-primary-soft: rgba(180, 83, 9, 0.14);
98
+ --stackline-ms-surface: #fffaf0;
99
+ --stackline-ms-surface-soft: #fffbeb;
100
+ --stackline-ms-outline: #fcd34d;
101
+ --stackline-ms-outline-strong: #b45309;
102
+ --stackline-ms-on-surface: #2f1b05;
103
+ --stackline-ms-on-surface-muted: #7c5b2e;
104
+ --stackline-ms-chip-bg: #fef3c7;
105
+ --stackline-ms-chip-text: #92400e;
106
+ }
107
+ ```
153
108
 
154
- ## Basic Usage
109
+ ### Usage
110
+ Import `AngularMultiSelectModule` into `NgModule` in `app.module.ts`
111
+ ```js
112
+ import { AngularMultiSelectModule } from '@stackline/angular-multiselect-dropdown/angular2-multiselect-dropdown';
155
113
 
156
- ```ts
157
- dropdownList = [
158
- { id: 1, itemName: 'India' },
159
- { id: 2, itemName: 'Singapore' },
160
- { id: 3, itemName: 'Australia' },
161
- { id: 4, itemName: 'Canada' }
162
- ];
114
+ @NgModule({
115
+ // ...
116
+ imports: [
117
+ AngularMultiSelectModule,
118
+ ]
119
+ // ...
120
+ })
163
121
 
164
- selectedItems = [{ id: 2, itemName: 'Singapore' }];
122
+ ```
165
123
 
166
- dropdownSettings = {
167
- singleSelection: false,
168
- text: 'Select Countries',
169
- selectAllText: 'Select All',
170
- unSelectAllText: 'UnSelect All',
171
- enableSearchFilter: true,
172
- tagToBody: false
173
- };
124
+ Declare the component data variables and options in your component where you want to consume the dropdown component.
125
+
126
+ ```js
127
+
128
+ import { Component, OnInit } from '@angular/core';
129
+
130
+ export class AppComponent implements OnInit {
131
+ dropdownList = [];
132
+ selectedItems = [];
133
+ dropdownSettings = {};
134
+ ngOnInit(){
135
+ this.dropdownList = [
136
+ {"id":1,"itemName":"India"},
137
+ {"id":2,"itemName":"Singapore"},
138
+ {"id":3,"itemName":"Australia"},
139
+ {"id":4,"itemName":"Canada"},
140
+ {"id":5,"itemName":"South Korea"},
141
+ {"id":6,"itemName":"Germany"},
142
+ {"id":7,"itemName":"France"},
143
+ {"id":8,"itemName":"Russia"},
144
+ {"id":9,"itemName":"Italy"},
145
+ {"id":10,"itemName":"Sweden"}
146
+ ];
147
+ this.selectedItems = [
148
+ {"id":2,"itemName":"Singapore"},
149
+ {"id":3,"itemName":"Australia"},
150
+ {"id":4,"itemName":"Canada"},
151
+ {"id":5,"itemName":"South Korea"}
152
+ ];
153
+ this.dropdownSettings = {
154
+ singleSelection: false,
155
+ text:"Select Countries",
156
+ selectAllText:'Select All',
157
+ unSelectAllText:'UnSelect All',
158
+ enableSearchFilter: true,
159
+ classes:"myclass custom-class"
160
+ };
161
+ }
162
+ onItemSelect(item:any){
163
+ console.log(item);
164
+ console.log(this.selectedItems);
165
+ }
166
+ OnItemDeSelect(item:any){
167
+ console.log(item);
168
+ console.log(this.selectedItems);
169
+ }
170
+ onSelectAll(items: any){
171
+ console.log(items);
172
+ }
173
+ onDeSelectAll(items: any){
174
+ console.log(items);
175
+ }
176
+ }
174
177
  ```
175
178
 
179
+ Add the following component tag in you template
176
180
  ```html
177
- <angular-multiselect
178
- [data]="dropdownList"
179
- [(ngModel)]="selectedItems"
180
- [settings]="dropdownSettings"
181
- (onSelect)="onItemSelect($event)"
182
- (onDeSelect)="onItemDeSelect($event)"
183
- (onSelectAll)="onSelectAll($event)"
184
- (onDeSelectAll)="onDeSelectAll($event)">
185
- </angular-multiselect>
186
- ```
181
+ <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
182
+ [settings]="dropdownSettings"
183
+ (onSelect)="onItemSelect($event)"
184
+ (onDeSelect)="OnItemDeSelect($event)"
185
+ (onSelectAll)="onSelectAll($event)"
186
+ (onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>
187
187
 
188
- ## Custom Templates
188
+ ```
189
+ ### Template - For custom html of menu item
189
190
 
190
191
  ```html
191
- <angular-multiselect
192
- [data]="dropdownList"
193
- [(ngModel)]="selectedItems"
194
- [settings]="dropdownSettings">
192
+ <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
195
193
  <c-item>
196
- <ng-template let-item="item">
197
- <label>{{ item.itemName }}</label>
198
- <img [src]="item.image" style="width: 24px; margin-left: 8px;" />
199
- </ng-template>
200
- </c-item>
201
- </angular-multiselect>
202
- ```
203
-
204
- The same template contract also works with the legacy selector:
194
+ <ng-template let-item="item">
195
+ <label style="color: #333;min-width: 150px;">{{item.itemName}}</label>
196
+ <img [src]="item.image" style="width: 30px; border: 1px solid #efefef;margin-right: 20px;" />
197
+ <label>Capital - {{item.capital}}</label>
198
+ </ng-template>
199
+ </c-item>
200
+ </angular2-multiselect>
205
201
 
206
- ```html
207
- <angular2-multiselect></angular2-multiselect>
208
202
  ```
209
203
 
210
- ## Forms Integration
211
-
212
- ### Template-driven forms
204
+ ### Template - For custom html of Selected item - badge
213
205
 
214
206
  ```html
215
- <form #form="ngForm">
216
- <angular-multiselect
217
- [data]="skills"
218
- [(ngModel)]="selectedSkills"
219
- [settings]="settings"
220
- name="skills"
221
- required>
222
- </angular-multiselect>
223
- </form>
207
+ <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
208
+ <c-badge>
209
+ <ng-template let-item="item">
210
+ <label style="margin: 0px;">{{item.itemName}}</label>
211
+ <img [src]="item.image" style="width: 16px; margin-right: 5px;" />
212
+ </ng-template>
213
+ </c-badge>
214
+ </angular2-multiselect>
215
+
224
216
  ```
225
217
 
226
- ### Reactive forms
218
+ ### Template Driven Forms support
227
219
 
228
220
  ```html
229
- <form [formGroup]="userForm">
230
- <angular-multiselect
231
- [data]="skills"
232
- [settings]="settings"
233
- formControlName="skills">
234
- </angular-multiselect>
221
+
222
+ <form (ngSubmit)="onSubmit()" #loginForm="ngForm" style="border: 1px solid #ccc; padding: 10px;">
223
+ <div class="form-group">
224
+ <label for="name">Skills</label>
225
+ <angular2-multiselect [data]="itemList" [(ngModel)]="formModel.skills"
226
+ [settings]="settings"
227
+ (onSelect)="onItemSelect($event)"
228
+ (onDeSelect)="OnItemDeSelect($event)"
229
+ (onSelectAll)="onSelectAll($event)"
230
+ (onDeSelectAll)="onDeSelectAll($event)" name="skills">
231
+ </angular2-multiselect>
232
+ </div>
235
233
  </form>
234
+
236
235
  ```
237
236
 
238
- ## Lazy Loading and Remote Data
237
+ ```js
239
238
 
240
- Enable lazy loading through the settings object and respond to the scroll event from your container logic:
239
+ formModel = {
240
+ name: '',
241
+ email: 'ascasc@aa.com',
242
+ skills: [{ "id": 1, "itemName": "Angular" }]
243
+ };
241
244
 
242
- ```ts
243
- settings = {
244
- text: 'Select Items',
245
- enableSearchFilter: true,
246
- lazyLoading: true,
247
- labelKey: 'name',
248
- primaryKey: 'id'
249
- };
250
245
  ```
251
246
 
252
- The versioned docs include working examples for lazy loading, remote data, grouping, templating, and forms usage.
253
-
254
- For sticky cards, constrained containers, or dashboard layouts, keep `tagToBody: false` so the dropdown panel stays anchored to the field and does not jump across the page.
247
+ ### Reactive Forms support
255
248
 
256
- ## Events
249
+ ```html
257
250
 
258
- The classic output contract is preserved:
251
+ <form [formGroup]="userForm" novalidate style="border: 1px solid #ccc; padding: 10px;">
252
+ <div class="form-group">
253
+ <label for="name">Skills</label>
254
+ <angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems"
255
+ [settings]="settings"
256
+ (onSelect)="onItemSelect($event)"
257
+ (onDeSelect)="OnItemDeSelect($event)"
258
+ (onSelectAll)="onSelectAll($event)"
259
+ (onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
260
+ </angular2-multiselect>
261
+ </div>
262
+ </form>
259
263
 
260
- - `(onSelect)`
261
- - `(onDeSelect)`
262
- - `(onSelectAll)`
263
- - `(onDeSelectAll)`
264
- - `(onAddFilterNewItem)`
264
+ ```
265
265
 
266
- ## Run Locally
266
+ ```js
267
+ userForm: FormGroup;
268
+ this.userForm = this.fb.group({
269
+ name: '',
270
+ email: ['', Validators.required],
271
+ skills: [[], Validators.required]
272
+ });
267
273
 
268
- ```bash
269
- npm install
270
- npm run docs:sync
271
- npm run build-package
272
- cd docs-src/angular-21
273
- npm install --ignore-scripts
274
- npm run build
275
274
  ```
276
275
 
277
- ## License
276
+ ### Settings
277
+ The following list of settings are supported by the component. Configure the settings to meet your requirement.
278
+
279
+ | Setting |Type | Description | Default Value |
280
+ |:--- |:--- |:--- |:--- |
281
+ | singleSelection | Boolean | To set the dropdown for single item selection only. | false |
282
+ | text | String | Text to be show in the dropdown, when no items are selected. | 'Select' |
283
+ | enableCheckAll | Boolean | Enable the option to select all items in list | false |
284
+ | selectAllText | String | Text to display as the label of select all option | Select All |
285
+ | unSelectAllText | String | Text to display as the label of unSelect option | UnSelect All |
286
+ | enableSearchFilter | Boolean | Enable filter option for the list. | false |
287
+ | maxHeight | Number | Set maximum height of the dropdown list in px. | 300 |
288
+ | badgeShowLimit | Number | Limit the number of badges/items to show in the input field. If not set will show all selected. | All |
289
+ | classes | String | Custom classes to the dropdown component. Classes are added to the dropdown selector tag. To add multiple classes, the value should be space separated class names.| '' |
290
+ | limitSelection | Number | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled. | none |
291
+ | disabled | Boolean | Disable the dropdown | false |
292
+ | searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |
293
+ | groupBy | String | Name of the field by which the list should be grouped. | none |
294
+ | searchAutofocus | Boolean | Autofocus search input field| true |
295
+ | labelKey | String | The property name which should be rendered as label in the dropdown| itemName |
296
+
297
+
298
+ ### Callback Methods
299
+ - `onSelect` - Return the selected item on selection.
300
+ Example : (onSelect)="onItemSelect($event)"
301
+ - `onDeSelect` - Return the un-selected item on un-selecting.
302
+ Example : (onDeSelect)="OnItemDeSelect($event)"
303
+ - `onSelectAll` - Return the list of all selected items.
304
+ Example : (onSelectAll)="onSelectAll($event)"
305
+ - `onDeSelectAll` - Returns an empty array.
306
+ Example : (onDeSelectAll)="onDeSelectAll($event)"
307
+ - `onOpen` - Callback method fired after the dropdown opens
308
+ Example : (onOpen)="onOpen($event)"
309
+ - `onClose` - Callback method, fired when the dropdown is closed
310
+ Example : (onClose)="onClose($event)"
311
+
312
+ ## Run locally
313
+ - Clone the repository or downlod the .zip,.tar files.
314
+ - Run `npm install`
315
+ - Run `ng serve` for a dev server
316
+ - Navigate to `http://localhost:4200/`
317
+ The app will automatically reload if you change any of the source files.
278
318
 
279
- MIT
319
+ ## License
320
+ MIT License.