/

Angular

Overview Setup Source code

On this page

@maskito/angular is a light-weighted library to use Maskito in an Angular-way.
Prerequisites

To get the most out of this guide, you should review the topic "Core Concepts" first.

Write less code

  • No need to query element from DOM. Just pass all required options to [maskito] directive.
  • No need to worry about clean-ups. All created event listeners are automatically removed after element is detached from DOM.

Basic directive approach

Use it when you have direct access to native input element. 
    
      import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';
import {MaskitoOptions} from '@maskito/core';

@Component({
  selector: 'your-component',
  template: `
    <input [maskito]="maskitoOptions" />
  `,
  imports: [MaskitoDirective],
})
export class YourComponent {
  readonly maskitoOptions: MaskitoOptions = {
    mask: /^\d+$/,
  };
}

Nested input element

Pass a predicate to Maskito to find input element for you, if you do not have a direct access to it.

By default maskito will try to find input/textarea by querying its host: host.querySelector('input,textarea') so that might be sufficient. Use custom predicate if you need custom logic. 
    
      import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';
import {MaskitoOptions, MaskitoElementPredicate} from '@maskito/core';

@Component({
  selector: 'your-component',
  template: `
    <custom-input-wrapper
      [maskito]="maskitoOptions"
      [maskitoElement]="predicate"
    >
      Using maskito with another library
    </custom-input-wrapper>
  `,
  imports: [MaskitoDirective],
})
export class YourComponent {
  readonly maskitoOptions: MaskitoOptions = {
    mask: /^\d+$/,
  };

  readonly predicate: MaskitoElementPredicate = (element) =>
    element.querySelector<HTMLInputElement>('input[id="my-input"]')!;
}

Custom input

See querying nested input in action
Default behavior is enough for Taiga UI inputs
Custom predicate is required if target input is not the first on in the DOM 
    
      
    

      
      
    

  
    
      <tui-textfield [maskito]="nameMask">
    <label tuiLabel>Name on the card</label>
    <input
        tuiInput
        [(ngModel)]="value"
    />
</tui-textfield>

    

      
      
    

  
    
      <!--
    Maskito can be applied on this component, given the predicate
    can properly target native input inside tui-textfield below
-->
<label
    tuiLabel
    class="tui-space_bottom-3"
>
    <input
        tuiCheckbox
        type="checkbox"
        [(ngModel)]="show"
    />
    Add card holder name
</label>

<tui-textfield>
    <label tuiLabel>Name on the card</label>
    <input
        tuiInput
        [disabled]="!show"
        [(ngModel)]="value"
    />
</tui-textfield>

Set value programmatically

When directly on native input/textarea tag, MaskitoDirective formats value set programmatically with Angular forms. 
    
      
    

      
      
    

  
    
      <input
    [formControl]="control"
    [maskito]="maskito"
/>
<button
    type="button"
    (click)="setValue()"
>
    Set 12345.6789
</button>

Pattern

Alternative way to apply mask on native input 
    
      
    

      
      
    

  
    
      <input
    placeholder="Name on the card"
    [maskitoPattern]="regExp"
    [(ngModel)]="name"
/>

<input
    maskitoPattern="\d{0,3}"
    placeholder="CVC"
    [(ngModel)]="cvc"
/>

Pipe

Format arbitrary value with the same options
Balance: $12 345.67 
    
      
    

      
      
    

  
    
      Balance: ${{ value | maskito: options }}

Custom unmask handler

According to W3C specification, textfield value should always be only a string -type (not number -type, not object -type or etc.). However, you can sometimes need to store value without mask in Angular form control. This example demonstrates how easily any Angular Control Value Accessor (default one or any custom one from a third-party UI Kit) can be monkey-patched to achieve this goal.

Control value:1000.42

    
      
    

      
      
    

  
    
      <input
    [maskito]="maskito"
    [stringifyHandler]="stringify"
    [unmaskHandler]="unmaskHandler"
    [(ngModel)]="value"
/>

<p>
    <strong>Control value:</strong>
    <code>{{ value }}</code>
</p>

<button
    type="button"
    (click)="value = 1234567.89"
>
    Programmatically patch value
</button>