@inspirationlabs/ng4-intl-phone

International phone prefix library for Angular 2 & 4

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
2033Sep 1, 2020May 14, 2017Minified + gzip package size for @inspirationlabs/ng4-intl-phone in KB

Readme

Angular 4 international phone prefix input

Description

This is a simple library with international phone prefix with flags images.

Installation

To install this component to an external project, follow the procedure:

  1. npm install ng4-intl-phone --save

  2. Add InternationalPhoneModule import to your @NgModule like example below

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { MyTestApp } from './my-test-app';
    import { InternationalPhoneModule } from 'ng4-intl-phone';
    
    @NgModule({
        imports:      [ BrowserModule, InternationalPhoneModule ],
        declarations: [ MyTestApp ],
        bootstrap:    [ MyTestApp ]
    })
    export class MyTestAppModule {}
    

    ##Testing in localhost

    • npm install ./relative/path/to/lib after npm run build to test locally in another app

    Usage

    Use one of the following two options.

    1. ngModel binding

    In this option the ngModel binding is used.

    <h1>
      {{title}}
    </h1>
    <div class="row">
      <div class="col-md-2">
        <int-phone-prefix [(ngModel)]="phoneNumber"></int-phone-prefix>
    
      </div>
    </div>
    

    2. Reactive forms

    In this option the value accessor of reactive forms is used.

    To use reactive forms define the application class as follows:

    
    export class MyTestApp implements OnInit {
    
        private myForm: FormGroup;
    
        constructor(private formBuilder: FormBuilder) { }
    
        ngOnInit() {
            this.myForm = this.formBuilder.group({
                myPhone: ['', Validators.required]
                // other controls are here...
            });
        }
    }
    

    Add the following snippet inside your template:

    <form [formGroup]="myForm" novalidate>
        <int-phone-prefix [locale]="'es'"
                        formControlName="myPhone"></int-phone-prefix>
      <!-- other controls are here... -->
    </form>
    

    @Input() locale

    An ISO 639-1 language code can be provided to set available language: es: Spanish, en: English

    @Input() defaultCountry

    An ISO 639-1 country code can be provided to set default country selected.
    

    @Input() maxLength

       maxLength (default: 15)
       
    

    @Input() onlyNumbers

      Allows only numeric values (default: true)
    

    License

    • License: MIT

    Author

    • Author: kondi0

    Mail

    Keywords

    • Phone
    • Prefix
    • International
    • Angular2
    • Angular4

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.