This library gives you a list of checkboxes when you provide any list of data. You can select items from checkboxes and the library provides events of the selection change event and selects all event.
- npm i sls-multiselect-checkbox
title : string
selectedBoxTitle : string
dataList : any
showSelectedData : boolean
textField : string
onChange
onSelectAll
<sls-multiselect-checkbox [title]="'Title-Data'" [dataList]="data" [showSelectedData]="true" [selectedDataList]="selectedData"
[textField]="'value'" (onChange)="onDataSelectionChange($event)" (onSelectAll)="onSelectAll($event)">
</sls-multiselect-checkbox>
1) When data in list are not object.
No need to include "textField" attribute.
let dataExample=['Example1','Example2','Example3'];
let selectedData=['Example2'];
<sls-multiselect-checkbox [title]="'Title-Data'" [dataList]="dataExample" [showSelectedData]="true"
(onChange)="onDataSelectionChange($event)" (onSelectAll)="onSelectAll($event)" [selectedDataList]="selectedData">
</sls-multiselect-checkbox>
1) When data in list are object.
Need to be include "textField" attribute with field name which you want to show as text of checkbox.
let dataExample=[
{key:'Key1',value:'Value1'},
{key:'Key2',value:'Value2'},
{key:'Key3',value:'Value3'},
];
let selectedData=[];
<sls-multiselect-checkbox [title]="'Title-Data'" [dataList]="dataExample" [showSelectedData]="true"
[textField]="'value'" (onChange)="onDataSelectionChange($event)" (onSelectAll)="onSelectAll($event)" [selectedDataList]="selectedData">
</sls-multiselect-checkbox>