Code/pincode input component for angular

Code (number/chars) input component for angular 7+ projects.
Ionic 4+ is supported, can be used in iOS and Android.

Preview

Supported platforms

Angular 7, 8, 9 +
Ionic 4, 5 +
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

Usage

Import CodeInputModule in your app module or page module:

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

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

Include the component on page template HTML:

  <code-input [isCodeHidden]="false"
              [isNonDigitsCode]="false"
              [codeLength]="4"
              (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:

--text-security-type: disc; - text presentation type when the isCodeHidden is enabled
--item-spacing: 4px; - horizontal space between input items
--item-height: 4.375em; - height of input items
--item-border: 1px solid #dddddd; - border of input item for an empty value
--item-border-bottom: 1px solid #dddddd; - bottom border of input item for an empty value
--item-border-has-value: 1px solid #dddddd; - border of input item with a value
--item-border-bottom-has-value: 1px solid #dddddd; - bottom border of input item with a value
--item-border-focused: 1px solid #dddddd; - border of input item when focused
--item-border-bottom-focused: 1px solid #dddddd; - bottom border of input item when focused
--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1); - shadow of input item when focused
--item-border-radius: 5px; - border radius of input item
--item-background: transparent; - input item background
--color: #171516; - text color of input items

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

codeLength: number - length of input code

isCodeHidden: boolean - when true inputted code chars will be shown as asterisks (points)

isNonDigitsCode: boolean - when true inputted code can contain any char and not only digits from 0 to 9. If the input parameter code contains non digits chars and isNonDigitsCode is false the value will be ignored

isPrevFocusableAfterClearing: boolean - when true after the input value deletion the caret will be moved to the previous input immediately. If false then after the input value deletion the caret will stay on the current input and be moved to the previous input only if the current input is empty

inputType: string - type of the input DOM elements like <input [type]="inputType"/> default 'tel'

code: string | number - the input code value for the component. If the parameter contains non digits chars and isNonDigitsCode is false the value will be ignored

Events

codeChanged - will be called every time when a user changed the code
codeCompleted - will be called only if a user entered full code