typescript 50 lines · 9 steps

A copy-to-clipboard directive in Angular

A standalone Angular directive that copies text on click and reflects a temporary 'copied' state through host bindings.

Explained by highlit

Angular Intermediate directives host bindings clipboard api signals progressive enhancement

1import { Directive, ElementRef, HostBinding, HostListener, Input, inject, signal } from '@angular/core';
2 
3@Directive({
selector: '[appCopyToClipboard]',
standalone: true,
6})
7export class CopyToClipboardDirective {
private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
9 
@Input('appCopyToClipboard') value = '';
@Input() resetDelay = 1500;
12 
private readonly copied = signal(false);
private timer?: ReturnType<typeof setTimeout>;
15 
@HostBinding('class.is-copied')
get isCopied(): boolean {
  return this.copied();
}
20 
@HostBinding('attr.aria-label')
get label(): string {
  return this.copied() ? 'Copied to clipboard' : 'Copy to clipboard';
}
25 
@HostListener('click')
async onClick(): Promise<void> {
  const text = this.value || this.host.nativeElement.innerText.trim();
  if (!text) return;
30 
  try {
    await navigator.clipboard.writeText(text);
    this.flagSuccess();
  } catch {
    const range = document.createRange();
    range.selectNodeContents(this.host.nativeElement);
    const selection = window.getSelection();
    selection?.removeAllRanges();
    selection?.addRange(range);
    if (document.execCommand('copy')) this.flagSuccess();
    selection?.removeAllRanges();
  }
}
44 
private flagSuccess(): void {
  clearTimeout(this.timer);
  this.copied.set(true);
  this.timer = setTimeout(() => this.copied.set(false), this.resetDelay);
}
50}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Attribute directives can encapsulate behavior and DOM feedback so any element becomes copyable with a single attribute.
2Host bindings driven by a signal keep CSS classes and ARIA attributes in sync with internal state automatically.
3Wrapping a modern API like the Clipboard API in a try/catch lets you fall back to legacy techniques when it's unavailable.

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';