Input masking

Masking user input is an input UX tool and also a data quality one. I’m a fan of the ngx-mask library, which makes it easy to implement input masking in Angular. We will demonstrate input masking by updating the phone number input field, ensuring that users input a valid phone number, as shown in the following screenshot:

Figure 8.11: Phone number field with input masking

Set up your input masking as follows:

1. Install the library via npm with npm i ngx-mask.
2. Either use the environment provider, provideEnvironmentNgxMask(), in app.config.ts or provideNgxMask() in your feature module, user.module.ts.
3. Import the NgxMaskDirective in profile.component.html:
4. Update the number field in ProfileComponent as follows:

   src/app/user/profile/profile.component.html
   <mat-form-field appearance="outline" fxFlex fxFlexOffset="10px">
     <mat-label>Number</mat-label>
     <input matInput type="...