Building Custom Directives in Angular: From Concept to Implementation

After covering the built-in directives that ship with Angular, the natural next step is learning to create your own. The built-in set is powerful, but real-world applications often demand behavior that goes beyond what those six directives can deliver. When you find yourself in that situation, a custom directive gives you the flexibility to implement exactly what your component needs.

Let's walk through the process of creating a custom directive from scratch. The CLI provides a straightforward command to scaffold a new directive:

ng generate directive <directive-name>

Or, using the shorter alias:

ng g d <directive-name>

For this example, we will build a directive called my-underline that underlines any text it is applied to. Open a terminal in your project root and run:

eg. ng g d my-underline

Executing this command produces two new files:

  • The directive TypeScript file
  • A spec file for unit testing

It also registers the new directive in the declarations array of the relevant module—the same behavior we observed when generating components in a previous post.

Creating Custom Directives in Angular — figure 1

Inside your project structure you should see something similar to this:

Creating Custom Directives in Angular — figure 2

We will focus on the file highlighted in yellow—my-underline.directive.ts. Opening it reveals the following boilerplate:

import { Directive } from '@angular/core';

@Directive({
  selector: '[appMyUnderline]'
})
export class MyUnderlineDirective {

  constructor() { }

}

Here we encounter the @Directive decorator for the first time. The directive's selector is set to appMyUnderline, and this is the identifier we'll use to apply the directive to elements in our templates.

To give our directive its underline functionality, add the following code to the constructor:

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 
     'textDecoration', 'underline');
  }

Since this is an introductory look at custom directives, we won't dive into the internal details of ElementRef or Renderer2 right now—those belong in a more advanced discussion.

Now that the directive is defined, let's put it to use. Open app.component.html and add the following markup:

<div appMyUnderline>This text will be underlined!</div>

Simply placing the directive selector as an attribute on any element activates the underline behavior—no additional wiring required.

Start the development server and navigate to localhost:4200 in your browser. You should see the output below:

Creating Custom Directives in Angular — figure 3

The text now appears underlined. Best of all, you can reuse this directive throughout your application as many times as needed.

While this example is simple, custom directives can handle far more complex scenarios with relative ease.

Note
A key distinction: directives do not carry their own template or HTML file. Think of a component as a directive that comes with a template attached.

The selector can be applied in several ways—as an attribute (as demonstrated above), as a class, or as an id. If you need a refresher on the different selector types, check out this guide.

That wraps up the basics of creating and using a custom directive.

Cheers!!!
Happy Coding