Repository files navigation

This project has been moved fromngx-material-contacts to@angular-material-extensions/contacts

Do you have any question or suggestion ? Please do not hesitate to contact us!Alternatively, provide a PR | open an appropriate issuehere

If did you like this project, supportangular-material-extensionsby starring ⭐ and sharing it 📢

• Demo
• Features
• Dependencies
• Peer Dependencies
• Additional Requirements - material (Include a theme)
• Additional Requirements - material icons
• Installation
• Usage
• Documentation
• Run Demo App Locally
• Development
• Other Angular Libraries
• Support
• License

View all the directives and components in action athttps://angular-material-extensions.github.io/contacts

• Display contacts in a table including name, email, phone number and photo
• Delete a contact via eventonContactRemoved
• Add a contact via eventonContactAdded
• Validation for adding a new contact incl. name, email and phone number form controls

• Angular - angular V7 is supported

• angular material theme
• angular material v7.x
• angular cdk v7.x
• angular animations v7.x
• angular forms v7.x
• angular flex-layout v7.0.0-beta.23
• ng2-avatar
• if you need a built in theme --> please let me know

npm i @angular/cdk @angular/material @angular/flex-layout @angular/animations @angular/forms ng2-avatar

• angular material theme

• The easiest way to import material design icons is to provide a link in yourindex.html file like below:

<linkhref="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

• alternative solution:

1. Install of the official npm module of the material design icons

npm i -s material-design-icons

2. Import them in yourangular.json file

"styles": ["styles.css","../node_modules/material-design-icons/iconfont/material-icons.css"      ],

Install above dependencies vianpm.

Now install@angular-material-extensions/contacts via:

npm install --save @angular-material-extensions/contacts

Note:If you are usingSystemJS, you should adjust your configuration to point to the UMD bundle.In your systemjs config file,map needs to tell the System loader where to look for@angular-material-extensions/contacts:

map:{'@angular-material-extensions/contacts':'node_modules/@angular-material-extensions/contacts/bundles/@angular-material-extensions/contacts.umd.js',}

Once installed you need to import the main module:

import{MatContactsModule}from'@angular-material-extensions/contacts';

The only remaining part is to list the imported module in your application module. The exact method will be slightlydifferent for the root (top-level) module for which you should end up with the code similar to (notice MatContactsModule .forRoot()):

import{MatContactsModule}from'@angular-material-extensions/contacts';@NgModule({declarations:[AppComponent, ...],imports:[MatContactsModule.forRoot(), ...],bootstrap:[AppComponent]})exportclassAppModule{}

Other modules in your application can simply importMatContactsModule:

import{MatContactsModule}from'@angular-material-extensions/contacts';@NgModule({declarations:[OtherComponent, ...],imports:[MatContactsModule, ...],})exportclassOtherModule{}

add the@angular-material-extensions/contacts element to your template:

<mat-contacts[contacts]="contacts"[readonly]="false"(onContactAdded)="addContact($event)"(onContactRemoved)="removeContact($event)"></mat-contacts>

in your component -->

constCONTACT_DATA:Contact[]=[{id:'RnCSW7Y88iTx',name:'Anthony Nahas',email:'anthony.na@your_domain.com',photoURL:'../../../assets/profiles/17p60.png',phoneNumber:'+1-202-555-0169'},{id:'KXgJviXd4EL9',name:'Amanda Lee',email:'amanda.lee@@angular-material-extensions/contacts.de',photoURL:'../../../assets/profiles/1p60.png',phoneNumber:'+1-502-555-0156'}]

exportclassHomeComponentimplementsOnInit{contacts=CONTACT_DATA;ngOnInit(){console.log('my contacts: ',this.contacts);}addContact(contact:Contact){console.log('on new contact: ',contact);// do whatever you want with the added contact}removeContact(contact:Contact){console.log('on removed contact: ',contact);// do whatever you want with the deleted contact}}

exportinterfaceContact{id?:string;name:string;email:string;photoURL?:string;phoneNumber?:string;}

Please checkout the full documentationhereor follow the officialtutorial

• clone this repo by running

$ git clone https://github.com/angular-material-extensions/contacts.git

• link the@angular-material-extensions/contacts package

$ gulp link

• navigate to the demo app directory

$cd demo

• install the dependencies

$ npm i

• run/start/serve the app

$ npm run start

or

$ ng serve --open

• the app is now hosted byhttp://localhost:4200/

1. clone thisrepo
2. Install the dependencies by runningnpm i
3. build the librarynpm run build orgulp build

$ npm run build

4. Link the library

• gulp link

5. Navigate to the demo app

• cd demo_npm i_npm start

• ngx-auth-firebaseui
• ngx-linkifyjs
• @firebaseui/ng-bootstrap
• @angular-material-extensions/password-strength
• @angular-material-extensions/link-preview
• @angular-material-extensions/google-maps-autocomplete
• @angular-material-extensions/pages
• @angular-material-extensions/freelancer-theme
• @angular-material-extensions/faq

• Drop an email to:Anthony Nahas
• or open an appropriateissue
• let us chat onGitter

Built by and for developers ❤️ we will help you 👊

This project is supported byjetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl.webstorm

Copyright (c) 2018Anthony Nahas. Licensed under the MIT License (MIT)