Angular 10+ component to filter contents in an alphabetical list, using default or custom templates. Perfect for building contact lists.
Compatible with earlier versions of Angular, except for AngularJS.
filter array by first letter javascript, alphabet filter angular, filter startswith javascript, alphabetical filter jquery, javascript filter by name, filter some javascript
jQuery Plugin for a Filterable Multi Selection Bootstrap Dropdown
How to make use of it:
Install
npm install alphabet-filter
Import into Module
import { AlphabetFilterModule } from 'alphabet-filter';
@NgModule({
imports: [
...,
AlphabetFilterModule
],
declarations: [...],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Insert into styles of angular.json
... "styles": [ "...", "node_modules/alphabet-filter/alphabet-filter.scss" ], ...
API
Inputs/Outputs (Required)
| Name | Type | Description |
|---|---|---|
data | any[] | Data to be listed.(ex .: <... [data]="contacts"></...>). |
propAlphaOrder | string | Property for name of the property to be ordered alphabetically.(ex .: <... propAlphaOrder="name"></...>). |
propsSearch | string or string[] | Property(ies) to be filtered.(ex .: <... [propsSearch]="['name']"></...>). |
onClick | EventEmitter<any> | Emit on item click.(ex .: <... (onClick)="selected($event)"></...>). |
Inputs/Outputs (Optional)
| Name | Type | Description |
|---|---|---|
placeholder | string | Placeholder of input filter. (ex .: <... []=""></...>). |
listClass | string | Class name for list element. (ex .: <... listClass="search-list"></...>). |
height | string | Height to be used throughout the component. (ex .: <... height="100%"></...>). |
withTemplate | boolean | Used when to need of customize using ng-template. (ex .: <... [withTemplate]="true"></...>). |
onCancel | EventEmitter<any> | Used to enable “close” button.(ex .: <... (onCancel)="cancel()"></...>). |
Alphabet Filter Component, AlphabetFilter Plugin/Github
See Demo And Download
Official Website(ericferreira1992): Click Here
This superior jQuery/javascript plugin is developed by ericferreira1992. For extra Advanced Usages, please go to the official website.
