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

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)

$ npm install --save angular-code-input

Choose the version corresponding to your Angular version:

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) {
  }

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;
  }
...

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();