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