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 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.

The latest versions of Angular keep the concept of directives, but take the best parts from AngularJS and add 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 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 to associate a template with them, which makes most of the already known properties for defining directives unnecessary. The simplicity of the API does not limit directives' behavior, but only enforces stronger separation of concerns. To complement this simpler API, Angular 2 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. We can use TypeScript, ES2015, or even ECMAScript 5 (ES5) in order to achieve the same result with a little bit more typing. This code defines a simple directive, written in TypeScript:

@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 label, Tell me the answer!, Angular will invoke the method defined under the @HostListener decorator in the directive's definition. In the end, the open method of the overlay manager will be executed.

An alternative ECMAScript 5 syntax for the definition of this directive is as follows:

var Tooltip = ng.core.Directive({ 
  selector: '[tooltip]', 
  inputs: ['tooltip'], 
  host: { 
    '(mouseenter)': 'onMouseEnter()', 
    '(mouseleave)': 'onMouseLeave()' 
  } 
}) 
.Class({ 
  constructor: [ng.core.ElementRef, Overlay, function (tooltip, el, manager) { 
    this.el = el; 
    this.overlay = manager.get(); 
  }], 
  onMouseEnter() { 
    this.overlay.open(this.el.nativeElement, this.tooltip); 
  }, 
  onMouseLeave() { 
    this.overlay.close(); 
  } 
}); 

The preceding ES5 syntax demonstrates the internal JavaScript DSL that Angular provides in order to allow us to write our code without the syntax, which is not yet supported by modern browsers.

We can summarize that Angular kept the concept of directives by maintaining the idea of attaching 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 4, Getting Started with Angular Components and Directives, we will take a further look at directives' API. We'll also compare the directives' definition syntax using ES2016 and ES5. Now, let's take a look at the big change to Angular components.