Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@angular-material-extensions/contacts
Advanced tools
Changelog
3.1.2 (2019-03-23)
Readme
# @angular-material-extensions/contacts - Angular Library to manage contacts and users with a material design (Angular V7 supported)
This project has been moved from ngx-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 issue here
If did you like this project, support angular-material-extensions by starring :star: and sharing it :loudspeaker:
View all the directives and components in action at https://angular-material-extensions.github.io/contacts
onContactRemoved
onContactAdded
npm i @angular/cdk @angular/material @angular/flex-layout @angular/animations @angular/forms ng2-avatar
index.html
file like below:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
npm i -s material-design-icons
angular.json
file"styles": [
"styles.css",
"../node_modules/material-design-icons/iconfont/material-icons.css"
],
Install above dependencies via npm.
Now install @angular-material-extensions/contacts
via:
npm install --save @angular-material-extensions/contacts
Note:If you are using
SystemJS
, 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 slightly
different 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]
})
export class AppModule {
}
Other modules in your application can simply import MatContactsModule
:
import { MatContactsModule } from '@angular-material-extensions/contacts';
@NgModule({
declarations: [OtherComponent, ...],
imports: [MatContactsModule, ...],
})
export class OtherModule {
}
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 -->
const CONTACT_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'
}
]
export class HomeComponent implements OnInit {
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
}
}
export interface Contact {
id?: string;
name: string;
email: string;
photoURL?: string;
phoneNumber?: string;
}
Please checkout the full documentation here or follow the official tutorial
$ git clone https://github.com/angular-material-extensions/contacts.git
$ gulp link
$ cd demo
$ npm i
$ npm run start
or
$ ng serve --open
http://localhost:4200/
npm i
npm run build
or gulp build
$ npm run build
gulp link
cd demo
_ npm i
_ npm start
Built by and for developers :heart: we will help you :punch:
This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm
Copyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)
FAQs
Angular Library to manage contacts and users with a material design
The npm package @angular-material-extensions/contacts receives a total of 1 weekly downloads. As such, @angular-material-extensions/contacts popularity was classified as not popular.
We found that @angular-material-extensions/contacts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.