Directives are one of the least used features in Angular. They are often overlooked as devs typically tend to put all the logic into components. Lack of a clear understanding of how directives work also contributes to their underuse. In this article, we will learn all about directives, when and how to use them, and look at some useful real-world examples to cement this understanding.

The rise of Angular and other similar front-end frameworks has led to a new style of development - Component Driven Development(CDD). In this approach, any given feature is broken down into a set of components that are to be implemented. These components will act together in some way to provide the feature to the user. Since there is a lot of focus on the component as being the primitive or the basic unit of functionality, other ways which the framework provides for adding behaviour tend to get overlooked. Directives are one such feature in Angular.

 is actually a subclass that's derived from 

! So in effect, you're creating a directive every time you define a new component. Any DOM manipulation logic within your components can most probably be offloaded to a directive. For example, you could use a directive to add behaviour such as drag and drop, or remembering scroll position. This makes directives a great tool for making behaviours reusable and applying them to different parts of your UI.

In the upcoming sections, we will learn about the different types of directives, look at appropriate use cases for each type, and understand them better through examples.

. It is, in fact, a directive that has its own template. A 

, on the other hand, does not have a template. We can declare a directive using the 

@Directive({
  selector: '[myFirstDirective]'
})
export class MyFirstDirective { }

 property represents the CSS selector that identifies this directive inside of a template.

You can use different ways of declaring the selector, which influence the way the directive is instantiated:

Directives can also have inputs and outputs specified by the 

 decorators respectively. You can also use Angular's dependency injection mechanism to inject services through their constructor.

The Angular framework makes heavy use of directives to provide a lot of inbuilt functionality. Most Angular template features that we use on a regular basis are based on directives.

Let's look at the following example that uses the 

<p
  [ngClass]="{'green': isServiceRunning, 'red': !isServiceRunning}">
  Service is {{ isServiceRunning ? "running" : "down"}}.
</p>

<style>
  .green {
    color: green;
  }
  .red {
    color: red;
  }
</style>

 directive to dynamically switch the CSS class on the text based on the 

 variable in the component. We can clearly see that 

 uses an attribute selector to implement its functionality and that it takes an object as its value. This object contains a set of class names as keys, with the values being boolean expressions.

From this, we can work out the actual implementation of the 

 directive - it applies the CSS class in question if the expression evaluates to 

 directive, we can confirm that this is indeed the case.

Another very commonly used directive is the 

 directive. It is used to add and remove elements from the DOM based on the specified conditions.

<div *ngIf="showWelcomeMessage" class="name">
  👋 Welcome, {{user.name}}!
</div>

In the above example, the welcome message is either shown or removed, based on the 

 in front, which makes them slightly different in terms of their behaviour.

Let's look at the different types of directives in the next section.

There are three types of directives that you can build in Angular:

 is a specific type of directive, so it has a very similar API and behaviour, with some bits added on.

 decorator, and takes a config object that is quite similar to the one for the 

 property, which in the case of components is always an element name since the component will be instantiated using its tag in a template.

@Component({
  selector: 'app-fancy-input',
  template: `
    <input
       type="text"
       class="fancy-input"
       [value]="value"
       (change)="onChange($event)"/>
  `
})
export class FancyInputComponent {
  @Input()
  value: string;
  
  @Output()
  valueChange = new EventEmitter<string>();
  
  onChange(e) {
    this.valueChange.emit(e.target.data);
  }
}

This is a component that renders a styled text box with the specified input and emits an event when the value changes.

We will not go into greater detail regarding components in this article, as this is quite a vast topic and warrants an article of its own. We will instead focus in-depth on other the other available types of directives.

Earlier in the article, we have seen how the 

 directive works. This is a great example of an 'attribute directive'.  This means that it is instantiated using the 

 attribute on the element in question, with the input value being passed in through the attribute.

Apart from these, you can also use an expression that evaluates to a string, array or object.

Another built-in attribute directive is the 

 directive. This can be used to set particular style attributes on elements dynamically based on calculations or values in your component.

<span [ngStyle]="{'font-size': computedFontSize + 'px'}">
  {{textContent}}
</span>

In the above example, the font size for the 

 element is set based on a value from the component. You could use this, for instance, to dynamically scale font size based on the content length.

Now that we have seen how to use the built-in directives that Angular provides, let's create our own attribute directive to better understand how they work.

A fairly common use case in apps that feature any kind of scrollable content, is remembering scroll position when you navigate away from a page and restoring it when you return.

This might sound really complicated and difficult to build, but let's simplify and break it down. Here are the things we need to do:

Let's implement the first step and see what that looks like.

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

@Directive({
  selector: '[stickyScroll]'
})
export class StickyScrollDirective implements OnDestroy {
  constructor(
    private elementRef: ElementRef
  ) { }

  ngOnDestroy() {
	const currentPosition = parseInt(
      this.elementRef.nativeElement.scrollTop, 10
    );
    this.store(currentPosition);
  }

  private store(value: number): void {
    localStorage.setItem(this.elementRef.nativeElement.id, value);
  }
}


 has been injected into our directive through the constructor. It provides access to the element on which the directive has been applied.

A small concession that will simplify the storage of the scroll position is the use of an 

 on the element. This gives us a unique key to reference the value when storing it in local storage.

Now that we have stored the scroll position, let's implement the bit where we retrieve and actually apply it back to the element.

import {
  AfterViewInit,
  OnDestroy,
  Directive,
  ElementRef
} from '@angular/core';

@Directive({
  selector: '[stickyScroll]'
})
export class StickyScrollDirective implements AfterViewInit, OnDestroy {
  constructor(
    private elementRef: ElementRef
  ) { }

  ngAfterViewInit() {
    const position = retrieve();
    this.elementRef.nativeElement.scrollTop = position;
  }
  
  ngOnDestroy() {
	const currentPosition = this.elementRef.nativeElement.scrollTop;
    this.store(currentPosition);
  }

  private store(value: number): void {
    localStorage.setItem(this.elementRef.nativeElement.id, value);
  }

  private retrieve(): number {
    const storedPosition = localStorage.getItem(
      this.elementRef.nativeElement.id
    );
    return storedPosition ? parseInt(storedPosition, 10) : 0;
  }
}

There we have it! We've just built a directive that can be used on any scrollable element to help it remember its scroll position.

It is easy to see how all this logic could have been crammed into a component and it would work just as well. However, by extracting it into a directive, we have offloaded the responsibility from any component. Another great advantage we have gained is that this new directive can be reused in as many components as we like since we've built it to be as generic as possible.

The implementation in this example has intentionally been kept simple so we can focus on understanding the core concepts. You can experiment with making this as fancy as you like by bringing in 

, scroll event listeners and better ways to store the position!

In an earlier section of the article, we have briefly looked at the 

 directive and how it adds and removes elements from the DOM based on the condition supplied.

. Directives that are used in this way are called 'structural directives'. They are so named because they can manipulate the structure of the HTML layout by adding, removing or changing the way elements are laid out. This is immediately clear in the case of the 

 in front is actually 'syntactic sugar' - i.e. the Angular compiler internally converts it into something a bit more elaborate.

<ng-template [ngIf]="showTodo">
  <div class="todo">{{todo}}</div>
</ng-template>

 directive for when there are multiple choices to make is the 

 but can be quite handy for reducing nesting in your templates.

Here is an example that renders different components depending on the status of the 

Another indispensable structural directive is the 

 directive. We use this to loop over arrays and render a fragment of template for each of them.

The above example renders an unordered list with a list item for each to-do in the array.

 directive can also provide an index for use inside the loop.

<ul>
  <li *ngFor="let todo of todos; index as i">
    {{index + 1}}.{{todo}}
  </li>
<ul>

When rendering large lists of data which can be manipulated or changed in any way, it can get computationally expensive to re-render large numbers of DOM nodes each time the list changes.

 input. This needs to be a function that takes two parameters - 

. The return value of the function should be a unique key that Angular will use to determine if an item needs to be re-rendered.

trackById(index: number, item: Item) {
  return item.id;
}

If you're getting your data from an external API, it will most likely come with IDs that you can use for the 

Now that we have seen what Angular has to offer in terms of structural directives, let's try to create our own.

It is pretty common within apps to have multiple different types of users with different permission levels. We are often asked to show or hide certain functionality based on user type and so on. Let's build a structural directive that hides an element if the current user is not authorized to see it.

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

@Directive({
  selector: '[isAuthorized]'
})
export class IsAuthorizedDirective implements OnInit {
  constructor(private authService: AuthService) { }
  
  ngOnInit() {
    const isAuthorized = this.authService.isAuthorized();
  }
}

Since we are creating a structural directive, we will apply it to any element using the asterisk in front.

<button *isAuthorized (click)="deleteAllRecords()">
  Delete
</button>

As we have seen earlier, whenever Angular encounters a directive that starts with 

 tag. The template tag is invisible to the DOM.

 - can be injected into our directive via the constructor. In addition, we will need to inject a 

, which is a tool that Angular provides to be able to programmatically instantiate views.

Once we have these injected, it is simply a question of using them to implement our functionality.

import {
  OnInit,
  Directive,
  TemplateRef,
  ViewContainerRef
} from '@angular/core';

@Directive({
  selector: '[isAuthorized]'
})
export class IsAuthorizedDirective implements OnInit {
  constructor(
  private authService: AuthService,
  private templateRef: TemplateRef,
  private viewContainerRef: ViewContainerRef
  ) { }
  
  ngOnInit() {
    const isAuthorized = this.authService.isAuthorized();
    if (isAuthorized) {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainerRef.clear();    
    }
  }
}

Lo and behold - our directive is ready for action! It can now be reused in place of many repeated lines in our components where we would have called the 

 in our templates, thereby providing a much cleaner solution! 

In this article, we have done a deep dive into the internals of Angular directives.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Angular Directives Demystified

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript