AlphabetFilter | Angular 10+
Angular component for filtering contents in alphabetical listing, using default or custom templates. Ideal to build contact lists.
Compatible with previous versions of Angular, except AngularJS.
Demo
See a live demo.
Simple use
Custom use (with ng-template)
{{item.name}}
Usage
Install
npm install alphabet-filter
Import into Module
;
angular.json
Insert into styles of ..."styles": ,...
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()"></...> ). |