• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

gauravsoni119/ng2-tel-input

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

gauravsoni119/ng2-tel-input

开源软件地址(OpenSource Url):

https://github.com/gauravsoni119/ng2-tel-input

开源编程语言(OpenSource Language):

JavaScript 65.5%

开源软件介绍(OpenSource Introduction):

This repository is no longer maintained.

Angular 2+ wrapper for intl-tel-input

Installation

Run following command to install ng2-tel-input

npm install ng2-tel-input intl-tel-input --save

After install, you need to add intlTelInput.css, intlTelInput.min.js, utils.js.

In case of @angular/cli, add 2 files in your angular.json.

For example,

  • Include intlTelInput.css in "styles" at your angular.json file :
  "styles": [
    ...
    "node_modules/intl-tel-input/build/css/intlTelInput.css",
    ...
  ]
  • Include intlTelInput.min.js, utils.js in "scripts" at your angular.json file :
  "scripts": [
    ...
    "node_modules/intl-tel-input/build/js/intlTelInput.min.js"
    ...
  ]

Now add Ng2TelInputModule into your AppModule. For example,

import {Ng2TelInputModule} from 'ng2-tel-input';

Once done, we are ready to use this library.

How to use?

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

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

Note

(intlTelInputObject) returns intl-tel-input instance. By default this package get utils.js from below link:- https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.1/js/utils.js But you can also provide your utilsScript file by using below options:-

[ng2TelInputOptions]="{initialCountry: 'in', utilsScript: 'node_modules/intl-tel-input/build/js/utils.js'}"

How to use this instance?

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

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



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
emartech/gulp-pug-lint: Gulp plugin for pug-lint发布时间:2022-06-21
下一篇:
dpmango/gulp-starter-pack发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap