typescript 60 lines · 8 steps

Building a phone-mask ControlValueAccessor in Angular

A directive that formats phone input on the fly while feeding clean digits back to Angular forms.

Explained by highlit

Angular Intermediate directives control-value-accessor input-masking two-way-binding renderer

1import { Directive, ElementRef, HostListener, Renderer2, forwardRef } from '@angular/core';
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
3 
4@Directive({
selector: '[appPhoneMask]',
standalone: true,
providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => PhoneMaskDirective),
    multi: true,
  },
],
14})
15export class PhoneMaskDirective implements ControlValueAccessor {
private onChange: (value: string) => void = () => {};
private onTouched: () => void = () => {};
18 
constructor(private el: ElementRef<HTMLInputElement>, private renderer: Renderer2) {}
20 
@HostListener('input', ['$event.target.value'])
handleInput(value: string): void {
  const formatted = this.format(value);
  this.renderer.setProperty(this.el.nativeElement, 'value', formatted);
  this.onChange(this.digits(formatted));
}
27 
@HostListener('blur')
handleBlur(): void {
  this.onTouched();
}
32 
writeValue(value: string | null): void {
  this.renderer.setProperty(this.el.nativeElement, 'value', this.format(value ?? ''));
}
36 
registerOnChange(fn: (value: string) => void): void {
  this.onChange = fn;
}
40 
registerOnTouched(fn: () => void): void {
  this.onTouched = fn;
}
44 
setDisabledState(isDisabled: boolean): void {
  this.renderer.setProperty(this.el.nativeElement, 'disabled', isDisabled);
}
48 
private digits(value: string): string {
  return value.replace(/\D/g, '').slice(0, 10);
}
52 
private format(value: string): string {
  const d = this.digits(value);
  if (d.length === 0) return '';
  if (d.length < 4) return `(${d}`;
  if (d.length < 7) return `(${d.slice(0, 3)}) ${d.slice(3)}`;
  return `(${d.slice(0, 3)}) ${d.slice(3, 6)}-${d.slice(6)}`;
}
60}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Implementing ControlValueAccessor lets a directive act as a first-class form control that Angular can read and write.
2Keeping the displayed value formatted while emitting raw digits separates presentation from the model's stored value.
3Renderer2 updates the DOM safely without touching nativeElement directly, keeping the directive platform-agnostic.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';