https://github.com/skyzerozx/ngx-contact-list
Angular component for filtering , contact list in alphabetical listing. Awesome Contact List
https://github.com/skyzerozx/ngx-contact-list
alphabet-filter angular ap cellphone-contact-list contact-list ngx ngx-contact-list search-alphabet typescript
Last synced: about 2 months ago
JSON representation
Angular component for filtering , contact list in alphabetical listing. Awesome Contact List
- Host: GitHub
- URL: https://github.com/skyzerozx/ngx-contact-list
- Owner: SkyZeroZx
- Created: 2022-09-08T05:23:11.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-09-10T06:15:54.000Z (over 3 years ago)
- Last Synced: 2025-09-15T08:15:03.402Z (9 months ago)
- Topics: alphabet-filter, angular, ap, cellphone-contact-list, contact-list, ngx, ngx-contact-list, search-alphabet, typescript
- Language: TypeScript
- Homepage: https://skyzerozx.github.io/ngx-contact-list/
- Size: 2.38 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgxContactList | Angular 13+
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.
Spiritual successor of alphabet-filter [repository](https://github.com/ericferreira1992/alphabet-filter).
Support use in mobile device, listening event touch start & touch move
# Demo
See a [live demo](https://skyzerozx.github.io/ngx-contact-list).
## Simple use
```html
{{item.name + ' ' + item.lastName}}
```
## Custom use (with ng-template)
```html
![]()
{{item.name + ' ' + item.lastName }}
{{item.phone | slice:0:3}} - {{item.phone | slice:3:6}} - {{item.phone
| slice:6:9}}
```
# Usage
## Install
`npm install ngx-contact-list`
## Import into Module
```typescript
import { NgxContactListModule } from 'ngx-contact-list';
@NgModule({
imports: [
...,
NgxContactListModule
],
declarations: [...],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## Insert into styles of `angular.json`
```json
...
"styles": [
"...",
"node_modules/ngx-contact-list/ngx-contact-list.scss"
],
...
```
## Custom Sytles
_In styles.scss or style of proyect_
```scss
...
/*Custom Styles for ngx contact list */
$color-contact-list : rgb(75, 77, 218) ;
$background-contact-list :#1B2B35;
$color-text : WhiteSmoke;
$color-input-search : WhiteSmoke;
$border-line-style : solid;
@import '/node_modules/ngx-contact-list/ngx-contact-list.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[]` | Property(ies) to be filtered.(ex .: ` <... [propsSearch]="['name']">`). |
| `onClick` | `EventEmitter` | 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` | Used to enable "close" button.(ex .: ` <... (onCancel)="cancel()">`). |
# Versions
| Ngx-Contact-List | Angular
| ---------------- | --------------------- |
| 01.0.3 | >=14.0.0 |
| 0.9 | >=13.0.0 < 14.0.0 |
| 0.8 | >=12.0.0 < 13.0.0 |
| 0.7 | >=11.0.0 < 12.0.0 |