#directives code explainers

typescript

import { Directive, Input, HostBinding, HostListener } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 
@Directive({

A custom range validator directive in Angular

form-validation directives accessibility

Intermediate 8 steps

typescript

import { Directive, ElementRef, HostListener, Renderer2, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@Directive({

Building a phone-mask ControlValueAccessor in Angular

directives control-value-accessor input-masking

Intermediate 8 steps

typescript

import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
 
interface Point {
  x: number;

Throttling pointer events with NgZone in Angular

change-detection requestanimationframe event-throttling

Advanced 8 steps

typescript

import {
  Directive,
  ElementRef,
  EventEmitter,

An infinite-scroll directive in Angular

intersectionobserver directives performance

Advanced 7 steps

typescript

import { Directive, ElementRef, EventEmitter, inject, NgZone, OnDestroy, Output } from '@angular/core';
 
@Directive({
  selector: '[appResizeDebounced]',

A debounced resize directive in Angular

debounce change-detection host-bindings

Advanced 7 steps

typescript

import { Directive, ElementRef, HostListener, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';

Building a tooltip directive in Angular

directives cdk-overlay hover-interaction

Intermediate 7 steps

typescript

import { Directive, ElementRef, HostBinding, HostListener, Input, inject, signal } from '@angular/core';
 
@Directive({
  selector: '[appCopyToClipboard]',

A copy-to-clipboard directive in Angular

directives host bindings clipboard api

Intermediate 9 steps

typescript

import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
 
interface Shortcut {
  key: string;

A keyboard shortcut directive in Angular

directives event-handling keyboard-shortcuts

Intermediate 9 steps

typescript

import { Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 
@Directive({
  selector: '[appTrapFocus]',

Building a focus-trap directive in Angular

accessibility focus-management dom

Intermediate 9 steps