What is the equivalent of `link` function in Angular to access DOM elements

Question

There are examples of setting the link attribute on Angular 2 directives to register callbacks that transform the DOM.

An example is creating directives for D3.js graphs. See this pen:

The link attribute:

Directives that want to modify the DOM typically use the link option to register DOM listeners as well as update the DOM. It is executed after the template has been cloned and is where directive logic will be put.

The API for Angular 4 directives is very different. How is similar functionality achieved in Angular 4?

Answer 1

In AngularJS you have 2 phases: compilation and linking. And AngularJS allows you to hook into these phases and perform custom DOM modification during compilation phase and binding between app model (scope) and DOM elements during linking phase. That's why the Directive Definition Object (DDO) has these keys:

app.directive('name', function() {
   return {
      compile: () => {}
      link: () => {}

Angular is different in that respect. Compilation and linking is performed as one phase now by the compiler and you don't have a way to hook into that process. You can read more about it in the following articles:

• Exploring Angular DOM manipulation techniques using ViewContainerRef
• Angular’s $digest is reborn in the newer version of Angular
• Here is what you need to know about dynamic components in Angular

Instead of linking function Angular provides two mechanisms how you can access DOM:

• Queries (@ViewChildren) - mostly used by components
• DOM element injection into constructor - mostly used by directives

You can read more about queries here. Here is an example of injecting DOM element into a directive:

@Directive()
export class MyDirective {
   constructor(el: ElementRef) {}