Angular directive composition

Let’s take a look at one of the most awaited Angular features.

Angular 15 is on the horizon, and with it, many great features. One I am incredibly excited about is directive composition.

And I am not the only one. The directive composition has been one of the most upvoted Angular issues on GitHub. Let's see what it's all about.

To explain directive composition, we will look at an actual use case in the form of a digital pinboard. We want to implement a pinboard that displays pins. Each pin should display an info text as a tooltip on hover. Furthermore, each pin can be dragged and dropped and initially rotated.

Digital pinboard with a couple of displayed pins

The code for such an application might look something like this.

<pinboard>
  <pin image="rocket"></pin>
  <pin image="beer"></pin>
  <pin image="keyboard"></pin>
   <pin image="testing"></pin>
  <pin image="coffee"></pin>
</pinboard>

We have a Pinboard component and project a bunch of pins to it. At this point, our pins will be displayed as illustrated on the graphic on top. This means they aren't yet initially rotated, nor are they draggable, nor will…