Level Up Your Angular 20 Skills With Custom Directives

Are you ready to take your Angular development from good to great? If you need to write cleaner, more reusable code that is also more powerful, now is the time to master one of the most flexible features Angular has to offer. This guide will walk you through everything you need to know about Custom Directives in Angular 20, and it will make you a more efficient and capable developer. We will explore what they are, why you need them, and how to build your own with practical examples.

What are Directives in Angular?

Directives in Angular are special instructions in your HTML. You can conceptualize them as strong commands that instruct Angular on how to change the DOM-that is, the structure of your webpage. They let you attach custom behaviors to elements, making your templates smarter and more dynamic.

Angular has built-in directives you use all the time, like *ngIf to show or hide an element and *ngFor to loop over a list. Custom directives let you create your own behaviors, tailored perfectly to your application’s needs.

Common Use Cases for Directives

Many common challenges can be resolved with the help of custom directives. They are ideal for:

• Adding a “copy to clipboard” feature to any text element.
• Creating custom tooltips that appear on hover.
• Automatic formatting of input fields, such as phone numbers or currency.
• Applying a certain style or animation when an element is scrolled into view.
• Disabling buttons or links based on a user’s permissions.
• Track user interactions, such as clicks on elements for analytic purposes.

Copy to Clipboard Directive Example Angular 20

Let’s build a directive that users will love: a “Copy to Clipboard” feature. This is a perfect angular custom directive tutorial because it solves a common problem. With this directive, you can make any text on your page easily copyable with a single click.

First, let’s generate our new directive using the Angular CLI.

ng generate directive copyToClipboard

This command creates copy-to-clipboard.directive.ts for us. Now, let’s add the logic to listen for a click and copy the content of the host element.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appCopyToClipboard]',
  standalone: true
})
export class CopyToClipboardDirective {
  @Input('appCopyToClipboard') textToCopy: string = '';

  constructor(private el: ElementRef) {}

  @HostListener('click')
  async onClick() {
    if (!this.textToCopy) {
      return;
    }

    try {
      await navigator.clipboard.writeText(this.textToCopy);
      
      const originalText = this.el.nativeElement.innerText;
      this.el.nativeElement.innerText = 'Copied!';
      
      setTimeout(() => {
        this.el.nativeElement.innerText = originalText;
      }, 1500);

    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  }
}

We use the @HostListener to watch for a click event on the element where the directive is placed. When a user clicks it, the onClick function runs. nside the function, we use the navigator.clipboard.writeText() browser API to copy the text. The text we want to copy is passed into our directive using an @Input().

Now, let’s put our new directive to use. We’ll import it into our main component and apply it to a button.

app.component.ts

import { Component } from '@angular/core';
import { CopyToClipboardDirective } from './copy-to-clipboard.directive';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CopyToClipboardDirective],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  shareableLink = 'https://yourawesomewebsite.com/page/123';
}

app.component.html

<div class="share-container">
  <p>Your shareable link:</p>
  <input type="text" [value]="shareableLink" readonly>
  <button [appCopyToClipboard]="shareableLink">Copy Link</button>
</div>

app.component.css

.share-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: sans-serif;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-width: 450px;
}

.share-container input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.share-container button {
  padding: 8px 12px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

Now you have a “Copy Link” button that, when clicked, copies the URL from the input field and gives the user instant feedback. It’s a very useful angular 20 directive example of how to create powerful, reusable features with just a few lines of code.

There are few more directive you can create like role based access buttons, auto focus, input formatter and many more.

Conclusion

You have now seen how Custom Directives in Angular 20 can transform your templates from static documents into dynamic, interactive experiences. By encapsulating behavior into reusable directives, you make your code cleaner, easier to maintain, and more powerful. You reduce repetition in your HTML and component logic, making your development process easier.