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.jsonfile :
"styles": [
...
"node_modules/intl-tel-input/build/css/intlTelInput.css",
...
]
- Include intlTelInput.min.js, utils.js in "scripts" at your
angular.jsonfile :
"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.jsBut 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');
}
-
1.在项目目录下的package.json文件中加入组件 “ng2-file-upload”: “^1.3.0”。 2.在终端运行npm install命令下载组件。 3.在需要使用的Module中需要引入如下两个模块： import { CommonModule } from '@angular/common'; import { FileUploadModule } from 'ng2-fil
-
在开发中有时在input上使用ng-model进行双向绑定时一直不生效的问题 <input type="type" ng-model="inputText"/> $scope.inputText = 123; console.log($scope.inputText) //undefined 而修改变量为 <input type="type" ng-model="model.inputText"/
-
用jQuery可以实现 将input的值绑定到ng-mode 上 $("#id").val(value).trigger('change'); <uib-tabset class="tab-container tabbable-line"> <uib-tab heading="续住信息"> <div class="row clearf
-
首先，先了解这两个属性是什么作用，ng-model是数据的双向绑定，ng-value官网上的解释： AngularJS expression, whose value will be bound to the value attribute and value property of the element. It is especially useful for dynamically gen
-
场景：项目使用了日期插件，在日期变动后，能计算时间差 问题：日期变动后，ng-change()未触发 原因：ng-change 事件只针对输入框值的真实修改，通过 JavaScript 来修改的无效。 解决方法：ng-change 指令指令不会覆盖原生的 onchange 事件，使用onchange()方法替代。 使用前代码：日期变动后，ng-change()未触发 <div class="r
-
不碰前端好多年，早已成为落伍者；前端技术发展迅速，忙于其他，一直无缘接触AngularJS、VueJS等前端框架。今初尝禁果，额...是第一次亲密接触AngularJS，被其ng-repeat、ng-repeat-start和ng-repeat-end所迷惑，看不错何区别。百度一下，依然没看明白，既然看不明白就自己试验吧。 代码如下： <!DOCTYPE html> <html n
-
input中使用了ng-model 默认的选中checked就失效了？ 这是angularJs导致的失效，改用angularJs的ng-checked="1"就好了
-
所遇问题： html：ng-model="searchKey" <div id="app-list" class="hidden" ng-controller="IndexController"> <section class="media create-app-list" style="height: 120px"> <aside class="media-body">
-
解决办法 A.将绑定的变量写成对象的形式 $scope.inputText = {value:"测试"} 页面绑定 <input type="type" ng-model="inputText.value"/> B.另一种解决办法: 把ng-if 改为 ng-show 就可以了 ng-model 在 ng-if 里面无效 ng-if指令的功能与ng-show指令相似，都用于控制元素的显示与
-
使用repeat循环输出指定的HTML，绑定input元素。 ng-bind ng-bind在使用赋值表达式生成数据模型的同时，还绑定变量到元素的innerHTML中； ng-value ng-value在使用赋值表达式生成数据模型的同时，还绑定变量到元素的value属性中； ng-model ng-model有点特殊，专用于表单元素，即只能用于表单元素，用于其它元素无效. 它实现了数据的双向绑定
-
�� ng2-tree �� Usage �� Demo �� API tree [tree] Load children asynchronously Load children using ngrx (or any redux-like library) Configure node via TreeModelSettings [settings] Tree class events (nod
-
Angular 2 Drag-and-Drop Angular 2 Drag-and-Drop without dependencies. Follow me to be notified about new releases. Some of these APIs and Components are not final and are subject to change! Transpilat
-
ng2-translate 是 Angular 2 的 i18n 库。 简单示例：https://stackblitz.com/github/ngx-translate/example
-
ng2-bootstrap 是 Angular 2 的扩展指令，实现了对 Bootstrap 框架的集成。 示例代码： // RECOMMENDED (doesn't work with system.js)import { AccordionModule } from 'ng2-bootstrap/accordion';// orimport { AccordionModule } from '
-
个人开发的博客，前端ng2-fuzhutech-blog采用angualr2 + ng2-Bootstrap实现，后端fuzhutech-blog基于Spring+SpringMVC+Mybatis架构. This project was generated with Angular CLI version 1.0.0. 技术选型 后端 Ioc容器 Spring Web框架 SpringMVC O
-
Angular PDFJS viewer with Mozilla's ViewerJS. Supports Angular 2+ �� Thanks a ton to the community - We are talking Downloads in millions now!!! This project is currently maintained by a single develo