multiple-checkboxes
Give the input array of object to show as checkboxes.This package returns checked items list and sorts list by checked items also provides filtering feature.
screenshots
default with checked
filtering 
Background css
Install package from npm
npm install multiple-checkboxes
Include module in app.module.ts file
import { MultipleCheckboxesModule } from 'multiple-checkboxes';
ngModule({
declarations: [AppComponent],
imports:[BrowserModule, MultipleCheckboxesModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>component.html
<!-- if want to get selected/checked list as string array -->
<app-multiple-checkboxes (updatedList)="selectedLocationList($event)" [height]="150" [masterList]="locations" [title]="'Locations'"
[DisplayField]="'name'"></app-multiple-checkboxes>
<!-- if want to get selected/checked list full json object array -->
<app-multiple-checkboxes (updatedListWithFulldata)="selectedLocationList($event)" [masterList]="locations" [title]="'Locations'"
[DisplayField]="'name'"></app-multiple-checkboxes>
- masterList is input array
- title is title to show
- DisplayField is field you want to display as checkbox
- updatedlist returns checked items as string from given list
- updatedListWithFulldata returns checked items as json object from given list
- height height of list div **_optional_*
In component.ts file
locations=[{id:1,name:"Pune"},{id:2,name:"Mumbai"},{id:3,name:"Delhi"},{id:4,name:"Goa"}];
selectedLocationList(list){
console.log(list)
//if Pune and Goa is selected
//output will be ["Pune","Goa"] if updatedlist event used
//output will be [{id:1,name:"Pune"},{id:4,name:"Goa"}] if updatedListWithFulldata event used
}Custom css
.bg-primary{
background-color: #2cb5b5 !important /*background color of title*/
}
.card-box{
height: 150px; /*div size of list //overflow scroll */
}