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

Preview

$ npm install --save angular-code-input

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

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

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

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