Narrowly Preventing Mayhem

    ionic-tel-input-rtl
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    added rtl support

    ionic wrapper for intel-tel-input-rtl

    Installation

    Run following command to install ionic-tel-input

    npm install ionic-tel-input-rtl intel-tel-input-rtl --save

    After install, you need to add intlTelInput.css.

    In case of ionic, add intlTelInput.css in your variables.scss. For example,

    • @import 'intel-tel-input-rtl/build/css/intlTelInput.css';

    • .iti-flag {background-image: url("../assets/imgs/flags/flags.png");}

    • @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .iti-flag {background-image: url("../assets/imgs/flags/flags@2x.png");} }

    • add flags folder in assets/imgs folder

    • replace flags folder in intel-tel-input by flags folder exist in module

    Now add ionicTelInputModule into your AppModule. For example,

    import { ionicTelInputModule} from ' ionic-tel-input';

    Once done, we are ready to use this library.

    How to use?

    In order to use this directive, you need to add " ionicTelInput" directive with "[ ionicTelInputOptions]" options to your text field. For example,

    <input type="text"
       ionicTelInput
      [ionicTelInputOptions]="{initialCountry: 'in'}"
      (hasError)="hasError($event)"
      ( ionicTelOutput)="getNumber($event)"
      (intlTelInputObject)="telInputObject($event)"
      (countryChange)="onCountryChange($event)" />

    Note

    • this module used the following module as a reference

    • modifying the style to meet the ionic mobile style

    • modifying the wrapper to refer to the jquery file

    • modifying the flags files to meet ionic mobile app

    • (intlTelInputObject) returns original element which hold intel-tel-input-rtl instance.

    How to use this instance?

    You can use it perform any functionality that is available on intel-tel-input-rtl plugin. For example, in your component,

    telInputObject(obj) {
        console.log(obj);
        obj.intlTelInput('setCountry', 'in');
      }
    

    N|Solid

    Keywords

    none

    Install

    npm i ionic-tel-input-rtl

    DownloadsWeekly Downloads

    4

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    308 kB

    Total Files

    18

    Last publish

    Collaborators

    • brotoyot