Changing directives

AngularJS introduced the concept of directives in the development of single-page applications. The purpose of directives is to encapsulate the DOM-related logic and allow us to build user interfaces by composing them. This way, we are able to extend the syntax and the semantics of HTML. Initially, like most innovative concepts, directives were viewed controversially because they predispose us to write invalid HTML when using custom elements or attributes without the data- prefix. However, over time, this concept has gradually been accepted and has proved that it is here to stay.

Another drawback of the implementation of directives in AngularJS is the different ways that we can use them. This requires an understanding of the attribute values, which can be literals, expressions, callbacks, or microsyntax. This makes tooling essentially impossible.

Angular keeps the concept of directives, but takes the best parts from AngularJS and adds some new ideas and syntax to it. The main purpose of Angular's directives is to attach behavior to the DOM by extending it with the custom logic defined in an ES2015 class. We can think of these classes as controllers associated to the directives and think of their constructors as similar to the linking function of the directives from AngularJS. However, the new directives have limited configurability. They do not allow the association of a template with them, which makes most of the already known properties for defining directives unnecessary. The simplicity of the API does not limit the directives behavior, but only enforces stronger separation of concerns. To complement this simpler API, Angular introduced a richer interface for the definition of UI elements, called components. Components extend the functionality of directives by allowing them to own a template, through the component metadata. We will take a further look at components later in this book.

The syntax used for Angular directives involves ES2016 decorators; keep in mind that TypeScript is a superset of ES2016, so it has decorators as well. Here's a snippet which defines a simple directive:

@Directive({ selector: '[tooltip]' })
export class Tooltip { 
  @Input() tooltip: string; 
  private overlay: Overlay;
 
  constructor(private el: ElementRef, manager: OverlayManager) { 
    this.overlay = manager.get(); 
  }
 
  @HostListener('mouseenter') onMouseEnter() { 
    this.overlay.open(this.el.nativeElement, this.tooltip); 
  }
 
  @HostListener('mouseleave') onMouseLeave() { 
    this.overlay.close(); 
  } 
} 

The directive can be used with the following markup in our template:

<div tooltip="42">Tell me the answer!</div> 

Once the user points over the Tell me the answer! label, Angular will invoke the method defined under the @HostListener decorator in the definition of the directive. In the end, the open method of the overlay manager will be executed.

We can summarize that Angular kept the concept of directives by maintaining the idea of attaching a behavior to the DOM. The core differences with AngularJS are the new syntax, and the further separation of concerns introduced by bringing the components. In Chapter 5, Getting Started with Angular Components and Directives, we will take a further look at directives API. Now, let's take a look at the big change to Angular components.