Code/pincode input component for angular

Robust and tested code (number/chars) input component for Angular 7 - 16+ projects. Ionic 4 - 7+ is supported, can be used in iOS and Android. Clipboard events are supported.

Star it to inspire us to build the best component!

Preview

Supported platforms

Angular 7 - 16+ Ionic 4 - 7+ Mobile browsers and WebViews on: Android and iOS Desktop browsers: Chrome, Firefox, Safari, Edge v.79 + Other browsers: Edge v.41 - 44 (without code hidden feature)

Installation

$ npm install --save angular-code-input

Choose the version corresponding to your Angular version:

Usage

Import CodeInputModule in your app module or page module:

import { CodeInputModule } from 'angular-code-input';

@NgModule({
  imports: [
    // ...
    CodeInputModule
  ]
})

It is possible to configure the component across the app using the root config. In such case the import will look as follows:

import { CodeInputModule } from 'angular-code-input';

@NgModule({
  imports: [
    // ...
    CodeInputModule.forRoot({
      codeLength: 6,
      isCharsCode: true,
      code: 'abcdef'
    }),
  ]
})

Include the component on page template HTML:

  <code-input [isCodeHidden]="true"
              [codeLength]="5"
              (codeChanged)="onCodeChanged($event)"
              (codeCompleted)="onCodeCompleted($event)">
  </code-input>

Inside a page script:

  // this called every time when user changed the code
  onCodeChanged(code: string) {
  }

  // this called only if user entered full code
  onCodeCompleted(code: string) {
  }

Configuration

View

It is possible to configure the component via CSS vars or using ::ng-deep (deprecated) angular CSS selector ::ng-deep

CSS vars:

Example with only bottom borders:

/* inside page styles*/
...
  code-input {
    --item-spacing: 10px;
    --item-height: 3em;
    --item-border: none;
    --item-border-bottom: 2px solid #dddddd;
    --item-border-has-value: none;
    --item-border-bottom-has-value: 2px solid #888888;
    --item-border-focused: none;
    --item-border-bottom-focused: 2px solid #809070;
    --item-shadow-focused: none;
    --item-border-radius: 0px;
  }
...

Component options

Events

Methods

For calling the component's methods it is required to access the component inside the template or page script. It can be reached as follows.

Inside the page template HTML add a template ref:

<code-input
  ...
  #codeInput
  ...
>
</code-input>

Inside a page script attach the component:

...
// adding to the imports
import {CodeInputComponent} from 'angular-code-input';
...
// adding to the page props
@ViewChild('codeInput') codeInput !: CodeInputComponent;
...
// calling the component's methods somewhere in the page.
// IMPORTANT: it will be accessible only after the view initialization!
this.codeInput.reset();