interact.io ng-multi-select-lib
Peer dependencies
-
@angular/common
: ^13.x.x -
@angular/core
: ^13.x.x -
lodash.xor
: ^4.5.0
Steps to import the ng-multi-select-lib
- Add the submodule to your project:
yarn add @interact.io/ng-multi-select-lib
- Import
NgMultiSelectLibModule
to yourapp.module.ts
- You are now all set! You can get started following the next section
The nitty-gritty
Use the <interact-multi-select>
tag in your html template as a wrapper.
You can assign the different properties to this tag:
multiSelectLabel: string
disabled: boolean
Then use the <interact-multi-select-option>
tag to customize how the options are showing.
It requires the following input:
value: any (value added to your formControl for the corresponding option)
Here is a complete example, assuming that disabled and multiSelectLabel are defined in your component:
<interact-multi-select formControlName="objects" [disabled]="disabled"
[multiSelectLabel]="multiSelectLabel">
<interact-multi-select-option *ngFor="let object of objectsList"
[value]="object">{{object.title}}</interact-multi-select-option>
</interact-multi-select>