Angular component for filtering , contact list in alphabetical listing. Awesome Contact List

Overview

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.

Support use in mobile device, listening event touch start & touch move

Demo

See a live demo.

Simple use

<ngx-contact-list
  [noSmoothScroll]="true"
  [withTemplate]="true"
  propAlphaOrder="name"
  [propsSearch]="['name' , 'lastName']"
  placeholder="type name or contact"
  [data]="contacts"
  height="550px"
>
  <ng-template let-item>
    <div>
      <span>{{item.name + ' ' + item.lastName}}</span>
    </div>
  </ng-template>
</ngx-contact-list>

Custom use (with ng-template)

<ngx-contact-list
  [noSmoothScroll]="true"
  propAlphaOrder="name"
  [propsSearch]="['name' , 'lastName' , 'phone']"
  placeholder="type name or contact"
  [data]="contacts"
  listClass="search-list"
  [withTemplate]="true"
  height="550px"
>
  <ng-template let-item>
    <div class="search-list-item">
      <img [src]=" imageExist(item)" alt="" />
      <span
        >{{item.name + ' ' + item.lastName }} <br />
        <small class="phone-small">
          {{item.phone | slice:0:3}} - {{item.phone | slice:3:6}} - {{item.phone
          | slice:6:9}}
        </small>
      </span>
    </div>
  </ng-template>
</ngx-contact-list>

Usage

Install

npm install ngx-contact-list

Import into Module

import { NgxContactListModule } from 'ngx-contact-list';

@NgModule({
  imports: [
    ...,
    NgxContactListModule
  ],
  declarations: [...],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Insert into styles of angular.json

...
"styles": [
  "...",
  "node_modules/ngx-contact-list/ngx-contact-list.scss"
],
...

Custom Sytles

In styles.scss or style of proyect

...
 /*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<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()"></...>).

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
You might also like...

Monorepo for all the tooling related to using ESLint with Angular

Monorepo for all the tooling related to using ESLint with Angular

Angular ESLint Monorepo for all the tooling which enables ESLint to lint Angular projects

Dec 29, 2022

Reactive Extensions for Angular

Reactive Extensions for Angular

RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.

Jan 5, 2023

Semantic UI Angular Integrations

Semantic-UI-Angular Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components. We are considering Angular 2 support in

Dec 28, 2022

The code for a set of Angular 6+ components for the PatternFly project.

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.

Nov 15, 2022

Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 Angular Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT Get Started in 4 steps MDBAngular 5 Demo 500+ material UI components Super s

Dec 30, 2022

Angular 2 building blocks :package: based on Semantic UI

Angular 2 building blocks :package: based on Semantic UI

Angular2 & Semantic UI Angular2 - Semantic UI Live demo ng-semantic.herokuapp.com Angular 2 Semantic UI version: 2.2.2 Installation npm install ng-sem

Dec 23, 2022

Native Angular components & directives for Lightning Design System

ng-lightning This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS f

Dec 8, 2022

Native AngularJS (Angular) directives for Bootstrap

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

Jan 3, 2023

NG Bootstrap - Angular powered Bootstrap widgets

NG Bootstrap - Angular powered Bootstrap widgets Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angula

Dec 24, 2022
Owner
Aprendiz todo y maestro de nada
null
Angular Library workspace to creating and testing angular libraries

Library Workspace Run Locally Clone the project https://github.com/sametcelikbicak/library-workspace.git Go to the library project directory cd li

Samet ÇELİKBIÇAK 4 Nov 1, 2022
Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Getting Started Clarity Angular is published as two npm packages: Contains the static styles for building HTML components. Contains the Angular compon

VMware Clarity 145 Dec 29, 2022
An example application that uses file-based routing with Angular, Analog, Vite with the Angular Router

Angular, Vite, and File-based routes This is an example application that uses Angular, Analog, and Vite for file-based routing. Routes are places in t

Brandon 9 Sep 25, 2022
Component infrastructure and Material Design components for Angular

Official components for Angular The Angular team builds and maintains both common UI components and tools to help you build your own custom components

Angular 23.2k Jan 3, 2023
Angular UI Component Library based on Ant Design

NG-ZORRO An enterprise-class Angular UI component library based on Ant Design. English | 简体中文 ✨ Features An enterprise-class UI design system for Angu

NG-ZORRO 8.3k Jan 6, 2023
🚀 Style and Component Library for Angular

ngx-ui Component & Style Library for Angular by Swimlane. Installing npm i @swimlane/ngx-ui --S Install the project's peer depencencies (moment, codem

Swimlane 654 Dec 24, 2022
A component built in angular 13 which can generate an signature image in different fonts based on the selection.

AngularSignatureGenerator This project was generated with Angular CLI version 13.2.6. Development server Run ng serve for a dev server. Navigate to ht

Rohith P 4 Apr 26, 2022
Demo showing how to lazy load a component in Angular without routing!

WidgetDashboard This project was generated with Angular CLI version 13.2.6. Development server Run ng serve for a dev server. Navigate to http://local

Andy Bond 3 Mar 25, 2022
Angular multiselect component for web application. Easy to integrate and use.

Angular multiselect component for web application. Easy to integrate and use.

Dinh The Loc 2 Apr 20, 2022
This is my first Angular App that is a to-do list that allows the user to add or delete to do items.

TodoApp This is my first Angular App that is a to-do list that allows the user to add or delete to do items. This project was generated with Angular C

Charmain Bonareri 3 Apr 7, 2022