Working Input Mask on v7 Input Changes

So I had a nice working input mask directive that worked in Ionic v6 leveraging the IMask library:

  selector: '[appMask]',
  providers: [IonInput],
export class MaskDirective {
  @Input('appMask') mask: string;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    IMask(this.el.nativeElement, {
      mask: this.mask

However v7 introduced major changes to the ion-input element. I tried updating my mask directive to pull the raw input element for use with the mask, but there is some async event writing to the input value apparently and causing a delay in the mask being written.

  // Doesn't Work
  if (this.el.nativeElement.localName === 'ion-input') {
      this.el.nativeElement.getInputElement().then((input: HTMLInputElement) => {
        const mask = IMask(input, {
          mask: this.mask,

Has anyone been able to apply an input mask in v7? I am not tied to using the IMask library, but I would rather leverage something that gives me flexible mask support than writing my own regex for everything I need.

You may use maskito library for input masking as given in Ionic 7 docs.

import {MaskitoOptions} from '@maskito/core';

export const userNameMask: MaskitoOptions = {
    mask: /^[a-zA-Z\s]{0,40}$/,

              label="" >

for more examples

1 Like

Thanks @techbinomial . Here is the official blog post: Announcing Ionic v7.1 - Ionic Blog