Angular Multiselect Dropdown
npm install angular18-multiselect-dropdownnpm install angular18-multiselect-dropdown`
2. Import the library module in your Angular module:
`
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AngularMultiselectDropdownComponent } from 'angular18-multiselect-dropdown';
@NgModule({
declarations: [
AppComponent,
AngularMultiselectDropdownComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Usage
1. Add the app-custom-multiselect component to your HTML template:
`
[options]="options"
[selectedOptions]="selectedOptions"
[placeholder]="'Select options'"
[limitSelection]="5"
[enableFilter]="true"
[selectAll]="true"
[disabled]="false"
(selectionChange)="onSelectionChange($event)">
`
2. In your component TypeScript file, define the options and handle events:
`
import { Component } from '@angular/core';
import { MultiSelectOption } from 'angular18-multiselect-dropdown';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
options: MultiSelectOption[] = [
{ id: 1, text: 'Option 1' },
{ id: 2, text: 'Option 2' },
{ id: 3, text: 'Option 3', disabled: true }
];
selectedOptions: MultiSelectOption[] = [];
onSelectionChange(selectedOptions: MultiSelectOption[]) {
console.log('Selection changed:', selectedOptions);
}
}
`
Inputs
1. options: MultiSelectOption[] - List of options to display in the dropdown. Each option must have id and text properties, and can optionally have a disabled property.
2. selectedOptions: MultiSelectOption[] - List of currently selected options.
3. placeholder: string - Placeholder text for the dropdown button.
4. limitSelection: number | null - Maximum number of selections allowed. If null, no limit is enforced.
5. enableFilter: boolean - Whether to show the search/filter bar.
6. selectAll: boolean - Whether to show "Select All" and "Deselect All" buttons.
7. disabled: boolean - Whether the dropdown is disabled and cannot be interacted with.
Outputs
selectionChange:
EventEmitter - Emits when the selection changes, including when selecting or deselecting options.
Example
1. HTML
`
[options]="[
{ id: 1, text: 'Option 1' },
{ id: 2, text: 'Option 2' },
{ id: 3, text: 'Option 3' }
]"
[selectedOptions]="selectedOptions"
placeholder="Select items"
[limitSelection]="3"
[enableFilter]="true"
[selectAll]="true"
(selectionChange)="handleSelectionChange($event)"
`
2. TS
`
import { Component } from '@angular/core';
import { MultiSelectOption } from 'angular18-multiselect-dropdown';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
options: MultiSelectOption[] = [
{ id: 1, text: 'Option 1' },
{ id: 2, text: 'Option 2' },
{ id: 3, text: 'Option 3' }
];
selectedOptions: MultiSelectOption[] = [];
handleSelectionChange(selectedOptions: MultiSelectOption[]) {
console.log('Selection changed:', selectedOptions);
}
}
``