Ionic 2.x/3.x - Ionic Numeric Keyboard

Ionic 2.x/3.x - Ionic Numeric Keyboard

Highly customizable numeric keyboard for your Ionic 2 app

$10.00

Not yet rated
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
1.0.3
Size:
0mb
Ionic:
2.x,3.x
Platforms:
iOS, Android, Windows Phone
View ID:
f82c8f6b
Released:
4 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
keyboard, number, numeric, ionic2, ionic3

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.

USING IONIC v1? CHECK OUT http://market.ionic.io/plugins/ion-numeric-keyboard


Plugin by icliclabs.com

This plugin is compatible with Ionic v2.x and v3.x!

Description

Ionic Numeric Keyboard is a gorgeous component allowing you to simulate a numeric keyboard without having to deal with a native (and painful) keyboard. The numeric keyboard is an easy-to-use directive similar to an ion-footer. You can easily customize the style or the content of each keys.

Test Before You Buy

You can test the app using Ionic View and enter the app id ** f82c8f6b**.

Features

  1. Works with iOS, Android and Windows Phone.
  2. Works great for passcode, SMS code validation, phone numbers, any numeric input in forms
  3. Easy to include in your existing app.
  4. The directive is very easy to use.
  5. The keyboard is highly customizable with just a few CSS lines.
  6. You can show/hide the keyboard easily.
  7. Compatible with your existing code.
  8. This component contains an easy to use directive. It comes with all 7 examples
  9. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.

Installation

  1. Copy the app/components/ion-numeric-keyboard.ts into your app directory
  2. Import IonNumericKeyboard component and add it to the declarations list in the app/app.module.ts file

That's all!

Usage

In your view, add inside the <ion-footer>: <ion-numeric-keyboard [visible]="isKeyboardVisible" [options]="keyboardOptions" (inkClick)="onClick($event)" (inkClose)="onClose($event)"></ion-numeric-keyboard>.

  • [visible] true to show the keyboard, false to hide it (false by default).
  • [options] an object to set some options like the control keys, whether the keyboard is animated, etc. See examples in the .zip files.
  • (inkClick) event when the user presses a key. See examples in the .zip files.
  • (inkClose) event when the keyboard gets closed.

That's all. Here is an example of a view:

Simple example

basic.html

<ion-header>
  <ion-navbar positive>
    <ion-title>Passcode</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="passcode-example">
      ... your content goes here ...
</ion-content>

<ion-footer>
  <ion-numeric-keyboard [visible]="isKeyboardVisible" [options]="keyboardOptions" (inkClick)="onClick($event)"></ion-numeric-keyboard>
</ion-footer>

basic.ts

import {Component, ViewChild} from '@angular/core';
import {Content} from 'ionic-angular';
import {IonNumericKeyboard, IonNumericKeyboardOptions} from '../../../components/ion-numeric-keyboard'; //import

@Component({
  templateUrl: 'build/pages/examples/basickeyboard/basickeyboard.html',
  directives: [IonNumericKeyboard] // don't forget that line :)
})
export class BasicKeyboardPage {
  keyboardOptions: IonNumericKeyboardOptions;
  isKeyboardVisible: boolean = true; // keyboard visible by default
  @ViewChild(Content) content: Content; // that's how you retrieve the current ion-content
  passcode: string = '';

  ngOnInit() {
    this.keyboardOptions = {
      contentComponent: this.content, // mandatory, you have to pass the content reference
      rightControlKey: {
        type: 'icon', // could be 'icon' or 'text'
        value: 'backspace' // the icon name
      }
    }
  }

  // function called when a user clicks on the keyboard
  onClick(event) {
    console.log(event);
    if (event.source === 'RIGHT_CONTROL') {
      this.passcode = this.passcode.substr(0, this.passcode.length - 1);
    }
    else if (event.source === 'NUMERIC_KEY') {
      this.passcode += event.key;
      if (this.passcode.length == 4) {
        window.alert('Verifying passcode ' + this.passcode);
        this.passcode = '';
      }
    }
  }
}

Complex example

complex.html

<ion-header>
  <ion-navbar positive>
    <ion-title>Number</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="passcode-example">
  <ion-grid>
    <ion-row>
      <ion-col>
        <h4>Please enter a number:</h4>
        <h4>{{nb}}</h4>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <button (click)="toggleKeyboard()">Toggle keyboard</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
<ion-footer>
  <ion-numeric-keyboard [visible]="isKeyboardVisible" [options]="keyboardOptions" (inkClick)="onClick($event)" (inkClose)="onClose($event)"></ion-numeric-keyboard>
</ion-footer>

complex.ts

import {Component, ViewChild} from '@angular/core';
import {Content} from 'ionic-angular';
import {IonNumericKeyboard, IonNumericKeyboardOptions} from '../../../components/ion-numeric-keyboard';

@Component({
  templateUrl: 'build/pages/examples/slideupkeyboard/slideupkeyboard.html',
  directives: [IonNumericKeyboard]
})
export class SlideUpKeyboardPage {
  keyboardOptions: IonNumericKeyboardOptions;
  isKeyboardVisible: boolean = false; // keyboard hidden when opening the page
  @ViewChild(Content) content: Content;
  nb: string = '';

  ngOnInit() {
    this.keyboardOptions = {
      hideOnOutsideClick: true, // close the keyboard when the user clicks outside of the keyboard, unless the clicked element contains the class `ion-numeric-keyboard-source` or is contained in an element containing the class.
      animated: true, // we want the slide up/down animation
      contentComponent: this.content,
      leftControlKey: {
        type: 'text', //text left control key
        value: '.' // you can use whatever you want as a value (',', '+', etc)
      },
      rightControlKey: {
        type: 'icon',
        value: 'backspace'
      }
    }
  }

  // function called when a user clicks on the keyboard
  // implement your own validation here     
  onClick(event) {
    if (event.source === 'LEFT_CONTROL') {
      if (this.nb.indexOf(event.key) === -1) {
        this.nb += event.key;
      }
    }
    else if (event.source === 'RIGHT_CONTROL') {
      this.nb = this.nb.substr(0, this.nb.length - 1);
    }
    else if (event.source === 'NUMERIC_KEY') {
      this.nb += event.key;
    }
  }

  // function called when the keyboard is closed because the user tapped outside
  onClose() {
    this.isKeyboardVisible = false;
  }

  toggleKeyboard() {
    this.isKeyboardVisible = !this.isKeyboardVisible;
  }
}

This component is structured, easy to customize and integrate into your Ionic app, BUT feel free to email me if you need any help.

Customization

Customizing this component is really easy. Here is how to change the color:

// here is how you can override the keyboard's default css
// --------------------------------------------------

/* BLACK KEYBOARD */
ion-numeric-keyboard.black-keyboard {
  ion-row ion-col.key {
    background-color: #333 !important;
    border-color: #444 !important;
    button {
      color: #fefefe !important;
    }
  }
  ion-row.ion-numeric-keyboard-top-bar,
  ion-row.ion-numeric-keyboard-top-bar ion-col.top-bar-key,
  ion-row ion-col.key.control-key {
    background-color: #242424 !important;
  }
}
/* END BLACK KEYBOARD */


/* FLAT KEYBOARD */
/* here is how you can remove the border around the keys */
ion-numeric-keyboard.flat-keyboard {
  ion-row ion-col.key { 
    border: none !important;
  }
  ion-grid,
  ion-row.ion-numeric-keyboard-top-bar,
  ion-row.ion-numeric-keyboard-top-bar ion-col.top-bar-key,
  ion-row ion-col.key.key.control-key {
    background-color: #fff !important;
  }
}
/* END FLAT KEYBOARD */

You can apply a class to the ion-numeric-keyboard component.

Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at icl1clabs@gmail.com.

Hey there! You'll need to log in before you can leave a comment here.

Polo Ma

Polo Ma   ·   4 years ago

I want to use this as a default for most of my number input form fields, so when focused on a field I make the keyboard visible. However, if i select an input further down the page the scroll pushes the "content" too far upwards. Then once you start typing it will correct itself. Is there a way to correct the scrolling (bouncing animation)? Also since I want to disable the native keyboard, I made the inputs readonly however with ionic i lose the blinking cursor. Is there a better way to prevent native keyboard? Hiding keyboard with native plugin still shows animation. If not, how would I go about adding a blinking cursor in the input field?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Shouton Eulle

Shouton Eulle   ·   4 years ago

not bad. I changed it a little to fit RC6. and it works perfectly. Save me couple hours. fine, worth much more than $10.

Shouton Eulle

Shouton Eulle   ·   4 years ago

@IclicLabs do you have any sample for passcode controlling? if you have already done, please let me know, if not, then it's ok.

Iclic Labs

Iclic Labs   ·   4 years ago

hey @ShoutonEulle, the "BasicKeyboard" example reproduces a passcode screen. Isn't what you are looking for?

Shouton Eulle

Shouton Eulle   ·   4 years ago

@IclicLabs no, but I close the issue, because i got another problem. Your plugin works perfectly, while i run "ionic serve" however, when I try to deploy it on my real device, I run "ionic build ios", i got errors as following [23:36:45] Type IonNumericKeyboard in /xxxxxxx/.tmp/components/ion-numeric-keyboard.ts is part of the declarations of 2 modules [23:36:45] PasscodePage in /xxxxxxx/.tmp/pages/pay/passcode/passcode.ts and PayHowMuchPage in /xxxxxx/playground/.tmp/pages/pay/payHowMuch/payHowMuch.ts! Please consider moving IonNumericKeyboard in /xxxxxx/.tmp/components/ion-numeric-keyboard.ts to a higher module that imports PasscodePage in /xxxxxx/playground/.tmp/pages/pay/passcode/passcode.ts and PayHowMuchPage in /xxxxxxxx/.tmp/pages/pay/payHowMuch/payHowMuch.ts. You can also create a new NgModule that exports and includes IonNumericKeyboard in /xxxxxx/playground/.tmp/components/ion-numeric-keyboard.ts then import that NgModule in PasscodePage in /xxxxxx/playground/.tmp/pages/pay/passcode/passcode.ts and PayHowMuchPage in /xxxxxxx/playground/.tmp/pages/pay/payHowMuch/payHowMuch.ts. [23:36:45] ngc failed [23:36:45] ionic-app-script task: "build" [23:36:45] Error: Error npm ERR! Darwin 16.3.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:build" "--" npm ERR! node v7.2.0 npm ERR! npm v3.10.9 npm ERR! code ELIFECYCLE npm ERR! xxxxxt@0.0.1 ionic:build: `ionic-app-scripts build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the xxxxxx@0.0.1 ionic:build script 'ionic-app-scripts build'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the jdai_walllet package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ionic-app-scripts build npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs xxxxxx npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls xxxxx npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! /xxxxxxxxxx/playground/npm-debug.log please help me

Iclic Labs

Iclic Labs   ·   4 years ago

Please email me at icl1clabs@gmail.com with the full stack formatted and some code. It is really difficult for me to help you on the marketplace.

Shouton Eulle

Shouton Eulle   ·   4 years ago

@IclicLabs I got the reason, and it works fine.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Naveesh

Naveesh   ·   4 years ago

Hello, I am getting the following error: L1: [16:02:08] typescript: xx/src/pages/authent icate/authenticate.ts, line: 17 import { Component, Input, Output, EventEmitter, SimpleChange} from '@angular/core'; L2: import { DomSanitizationService, SafeHtml } from '@angular/platform- browser'; L3: import { Content } from 'ionic-angular' Argument of type '{ selector: string; templateUrl: string; directive s: typeof IonNumericKeyboard[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'directives' does not exist in type 'Component'. L16: templateUrl: 'authenticate.html', L17: directives: [IonNumericKeyboard]

Naveesh

Naveesh   ·   4 years ago

Was able to fox the DOM issue by replacing "DomSanitizationService" with "DomSanitizer" but still getting issue to call directives in @Component. Kindly help. @Component({ selector: 'page-authenticate', templateUrl: 'authenticate.html', directives: [IonNumericKeyboard] })

Iclic Labs

Iclic Labs   ·   4 years ago

Hello Naveesh, please email me at icl1clabs@gmail.com with more details (ionic version, code sample, etc). I should be able to help you :)

Shouton Eulle

Shouton Eulle   ·   4 years ago

yes, just replace "DomSanitizationService" with "DomSanitizer", nothing more. I got same problems.

Iclic Labs

Iclic Labs   ·   4 years ago

Yes I am waiting for the final version to update this plugin. Coming really soon.

Shouton Eulle

Shouton Eulle   ·   4 years ago

foo<br> bar<br>

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Arun Kumar

Arun Kumar   ·   4 years ago

Hi, thanks for the plugin. I am on 2.0.0-rc.4. Would it be possible for you to update the plugin now, as i am assuming that most of the breaking changes are done with rc-1. I understand the rationale behind waiting for the final release, but would be really helpful, if you can give an update for rc3 or 4. Thanks & Regards Arun

Iclic Labs

Iclic Labs   ·   4 years ago

Hey @ArunKumar, I have a working version for the RC4. I haven't published it yet due to a small transition issue for iOS (I am currently working with the ionic team to fix that issue for the final release). If you have purchased the plugin and are currently on the RC4, email me at icl1clabs@gmail.com, I'll send you the updated version.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Dmitry

Dmitry   ·   4 years ago

Hi, I wonder if this plugin compatible with RC5. I need to buy something like this but only for RC5

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Dmitri, the RC5 changelog is relatively small, the RC4 version should work seamlessly. I am going to update the RC4 version tonight or tomorrow and let you know.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

marcelo belnicoff

marcelo belnicoff   ·   4 years ago

Hi, I having some problems using the plugin. This is my stack Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.17 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.45 ios-deploy version: 1.9.0 ios-sim version: 5.0.12 OS: macOS Sierra Node Version: v6.6.0 Xcode version: Xcode 8.2.1 Build version 8C1002 I'mgetting this error while running on ios or android. [11:11:16] Supplied parameters do not match any signature of call target. [11:11:16] ngc failed [11:11:16] ionic-app-script task: "build" [11:11:16] Error: Error Thanks for your help.

marcelo belnicoff

marcelo belnicoff   ·   4 years ago

I found the problem. In the example, the onClose method is called with $event, but the implementation of the method has no parameters. thanks!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

marcelo belnicoff

marcelo belnicoff   ·   4 years ago

Hi, the toggle does work ok? I' trying to add a two fileds form, and i can't keep the keyboard open when I click in the second field. I added class "ion-numeric-keyboard-source" to the second input, add and remove the "inkClose" binding, but when the second filed is touched, before going to "closeOnOutsideClickEvent" the keyboard is hidden. thanks for your help.

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Marcelo, Email me at icl1clabs@gmail.com with your code so I can help you figure this out. Cheers,

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Sameer Charles

Sameer Charles   ·   4 years ago

Just bought and tried to make it works as you have documented. I am trying on the latest ionic release 3.0.1 Lots of errors but this is the first one, "Can't bind to 'visible' since it isn't a known property of ion-numeric-keyboard"

Iclic Labs

Iclic Labs   ·   4 years ago

hey @SameerCharles, The plugin is not yet compatible with ionic 3.0.1. Email me at icliclabs@gmail.com so we can figure out a solution (I can refund you).

Sameer Charles

Sameer Charles   ·   4 years ago

Hi @IclicLabs, don't worry about the refund. In the mean time I managed to make the basic keyboard work. I am using delayed/lazy loading so had to make sure the imports etc are all correct. I will play around and see how far I go, if I can't use it at all then I will report. Either way, it would be great if you can upgrade to 3.x for future. I think this plugin can be very useful.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Iclic Labs

Iclic Labs   ·   4 years ago

This plugin is now compatible with ionic 3.x!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Chris

Chris   ·   4 years ago

Is this plugin also useable with the ion-searchbar?

Iclic Labs

Iclic Labs   ·   4 years ago

Yes it should possible to trigger the keyboard when you click on the ion-searchbar.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nu Maniphanh

Nu Maniphanh   ·   3 years ago

What input control event to use in order to trigger keyboard to show/hide? Is this going to override native keyboard?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Tomas Eklund

Tomas Eklund   ·   3 years ago

No more support, or developer on vacation? I purchased this keyboard a few weeks ago and ran into a problem where the provided examples did not work for me on iOS (works fine in the browser and on Android). Tried contacting support a week ago and tried again 4 days later. Still no response. I guess for $10 you shouldn't expect much, but I thought it would be worth mentioning that this plugin seems to be unsupported.

Sluijs

Sluijs   ·   3 years ago

I tried to contact the developer, but no response on email as well. Did you manage to get in touch with him?

Tomas Eklund

Tomas Eklund   ·   3 years ago

I'm afraid not. No response whatsoever.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

MadhanRaj

MadhanRaj   ·   2 years ago

Hi, 1. Is it possible to close the keyboard when scroll the page ? 2. How to use the "closeOnOutsideClickEvent()" in use case class ? 3. How to set focus to specific field ? Please help me out from these issue's Thanks in advance...

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

MadhanRaj

MadhanRaj   ·   2 years ago

Hi, 1. Is it possible to close the keyboard when scroll the page ? 2. How to use the "closeOnOutsideClickEvent()" in use case class ? 3. How to set focus to specific field ? Please help me out from these issue's Thanks in advance...

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Tomas Eklund

Tomas Eklund   ·   3 years ago

No more support, or developer on vacation? I purchased this keyboard a few weeks ago and ran into a problem where the provided examples did not work for me on iOS (works fine in the browser and on Android). Tried contacting support a week ago and tried again 4 days later. Still no response. I guess for $10 you shouldn't expect much, but I thought it would be worth mentioning that this plugin seems to be unsupported.

Sluijs

Sluijs   ·   3 years ago

I tried to contact the developer, but no response on email as well. Did you manage to get in touch with him?

Tomas Eklund

Tomas Eklund   ·   3 years ago

I'm afraid not. No response whatsoever.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nu Maniphanh

Nu Maniphanh   ·   3 years ago

What input control event to use in order to trigger keyboard to show/hide? Is this going to override native keyboard?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Chris

Chris   ·   4 years ago

Is this plugin also useable with the ion-searchbar?

Iclic Labs

Iclic Labs   ·   4 years ago

Yes it should possible to trigger the keyboard when you click on the ion-searchbar.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Iclic Labs

Iclic Labs   ·   4 years ago

This plugin is now compatible with ionic 3.x!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Sameer Charles

Sameer Charles   ·   4 years ago

Just bought and tried to make it works as you have documented. I am trying on the latest ionic release 3.0.1 Lots of errors but this is the first one, "Can't bind to 'visible' since it isn't a known property of ion-numeric-keyboard"

Iclic Labs

Iclic Labs   ·   4 years ago

hey @SameerCharles, The plugin is not yet compatible with ionic 3.0.1. Email me at icliclabs@gmail.com so we can figure out a solution (I can refund you).

Sameer Charles

Sameer Charles   ·   4 years ago

Hi @IclicLabs, don't worry about the refund. In the mean time I managed to make the basic keyboard work. I am using delayed/lazy loading so had to make sure the imports etc are all correct. I will play around and see how far I go, if I can't use it at all then I will report. Either way, it would be great if you can upgrade to 3.x for future. I think this plugin can be very useful.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Shouton Eulle

Shouton Eulle   ·   4 years ago

not bad. I changed it a little to fit RC6. and it works perfectly. Save me couple hours. fine, worth much more than $10.

Shouton Eulle

Shouton Eulle   ·   4 years ago

@IclicLabs do you have any sample for passcode controlling? if you have already done, please let me know, if not, then it's ok.

Iclic Labs

Iclic Labs   ·   4 years ago

hey @ShoutonEulle, the "BasicKeyboard" example reproduces a passcode screen. Isn't what you are looking for?

Shouton Eulle

Shouton Eulle   ·   4 years ago

@IclicLabs no, but I close the issue, because i got another problem. Your plugin works perfectly, while i run "ionic serve" however, when I try to deploy it on my real device, I run "ionic build ios", i got errors as following [23:36:45] Type IonNumericKeyboard in /xxxxxxx/.tmp/components/ion-numeric-keyboard.ts is part of the declarations of 2 modules [23:36:45] PasscodePage in /xxxxxxx/.tmp/pages/pay/passcode/passcode.ts and PayHowMuchPage in /xxxxxx/playground/.tmp/pages/pay/payHowMuch/payHowMuch.ts! Please consider moving IonNumericKeyboard in /xxxxxx/.tmp/components/ion-numeric-keyboard.ts to a higher module that imports PasscodePage in /xxxxxx/playground/.tmp/pages/pay/passcode/passcode.ts and PayHowMuchPage in /xxxxxxxx/.tmp/pages/pay/payHowMuch/payHowMuch.ts. You can also create a new NgModule that exports and includes IonNumericKeyboard in /xxxxxx/playground/.tmp/components/ion-numeric-keyboard.ts then import that NgModule in PasscodePage in /xxxxxx/playground/.tmp/pages/pay/passcode/passcode.ts and PayHowMuchPage in /xxxxxxx/playground/.tmp/pages/pay/payHowMuch/payHowMuch.ts. [23:36:45] ngc failed [23:36:45] ionic-app-script task: "build" [23:36:45] Error: Error npm ERR! Darwin 16.3.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:build" "--" npm ERR! node v7.2.0 npm ERR! npm v3.10.9 npm ERR! code ELIFECYCLE npm ERR! xxxxxt@0.0.1 ionic:build: `ionic-app-scripts build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the xxxxxx@0.0.1 ionic:build script 'ionic-app-scripts build'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the jdai_walllet package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ionic-app-scripts build npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs xxxxxx npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls xxxxx npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! /xxxxxxxxxx/playground/npm-debug.log please help me

Iclic Labs

Iclic Labs   ·   4 years ago

Please email me at icl1clabs@gmail.com with the full stack formatted and some code. It is really difficult for me to help you on the marketplace.

Shouton Eulle

Shouton Eulle   ·   4 years ago

@IclicLabs I got the reason, and it works fine.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

marcelo belnicoff

marcelo belnicoff   ·   4 years ago

Hi, I having some problems using the plugin. This is my stack Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.17 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.45 ios-deploy version: 1.9.0 ios-sim version: 5.0.12 OS: macOS Sierra Node Version: v6.6.0 Xcode version: Xcode 8.2.1 Build version 8C1002 I'mgetting this error while running on ios or android. [11:11:16] Supplied parameters do not match any signature of call target. [11:11:16] ngc failed [11:11:16] ionic-app-script task: "build" [11:11:16] Error: Error Thanks for your help.

marcelo belnicoff

marcelo belnicoff   ·   4 years ago

I found the problem. In the example, the onClose method is called with $event, but the implementation of the method has no parameters. thanks!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Dmitry

Dmitry   ·   4 years ago

Hi, I wonder if this plugin compatible with RC5. I need to buy something like this but only for RC5

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Dmitri, the RC5 changelog is relatively small, the RC4 version should work seamlessly. I am going to update the RC4 version tonight or tomorrow and let you know.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Arun Kumar

Arun Kumar   ·   4 years ago

Hi, thanks for the plugin. I am on 2.0.0-rc.4. Would it be possible for you to update the plugin now, as i am assuming that most of the breaking changes are done with rc-1. I understand the rationale behind waiting for the final release, but would be really helpful, if you can give an update for rc3 or 4. Thanks & Regards Arun

Iclic Labs

Iclic Labs   ·   4 years ago

Hey @ArunKumar, I have a working version for the RC4. I haven't published it yet due to a small transition issue for iOS (I am currently working with the ionic team to fix that issue for the final release). If you have purchased the plugin and are currently on the RC4, email me at icl1clabs@gmail.com, I'll send you the updated version.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Naveesh

Naveesh   ·   4 years ago

Hello, I am getting the following error: L1: [16:02:08] typescript: xx/src/pages/authent icate/authenticate.ts, line: 17 import { Component, Input, Output, EventEmitter, SimpleChange} from '@angular/core'; L2: import { DomSanitizationService, SafeHtml } from '@angular/platform- browser'; L3: import { Content } from 'ionic-angular' Argument of type '{ selector: string; templateUrl: string; directive s: typeof IonNumericKeyboard[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'directives' does not exist in type 'Component'. L16: templateUrl: 'authenticate.html', L17: directives: [IonNumericKeyboard]

Naveesh

Naveesh   ·   4 years ago

Was able to fox the DOM issue by replacing "DomSanitizationService" with "DomSanitizer" but still getting issue to call directives in @Component. Kindly help. @Component({ selector: 'page-authenticate', templateUrl: 'authenticate.html', directives: [IonNumericKeyboard] })

Iclic Labs

Iclic Labs   ·   4 years ago

Hello Naveesh, please email me at icl1clabs@gmail.com with more details (ionic version, code sample, etc). I should be able to help you :)

Shouton Eulle

Shouton Eulle   ·   4 years ago

yes, just replace "DomSanitizationService" with "DomSanitizer", nothing more. I got same problems.

Iclic Labs

Iclic Labs   ·   4 years ago

Yes I am waiting for the final version to update this plugin. Coming really soon.

Shouton Eulle

Shouton Eulle   ·   4 years ago

foo<br> bar<br>

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Polo Ma

Polo Ma   ·   4 years ago

I want to use this as a default for most of my number input form fields, so when focused on a field I make the keyboard visible. However, if i select an input further down the page the scroll pushes the "content" too far upwards. Then once you start typing it will correct itself. Is there a way to correct the scrolling (bouncing animation)? Also since I want to disable the native keyboard, I made the inputs readonly however with ionic i lose the blinking cursor. Is there a better way to prevent native keyboard? Hiding keyboard with native plugin still shows animation. If not, how would I go about adding a blinking cursor in the input field?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

marcelo belnicoff

marcelo belnicoff   ·   4 years ago

Hi, the toggle does work ok? I' trying to add a two fileds form, and i can't keep the keyboard open when I click in the second field. I added class "ion-numeric-keyboard-source" to the second input, add and remove the "inkClose" binding, but when the second filed is touched, before going to "closeOnOutsideClickEvent" the keyboard is hidden. thanks for your help.

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Marcelo, Email me at icl1clabs@gmail.com with your code so I can help you figure this out. Cheers,

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}