{"id":1611,"date":"2023-10-11T05:00:00","date_gmt":"2023-10-11T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1611"},"modified":"2023-10-02T15:20:14","modified_gmt":"2023-10-02T22:20:14","slug":"directive-composition-api","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/directive-composition-api\/","title":{"rendered":"Directive Composition API"},"content":{"rendered":"\n

In the past few weeks, we’ve covered different examples of directives, such as the CDK Listbox directive<\/a> and the CDK Drag and Drop directive. I have mentioned that directives are underused<\/a> in Angular applications these days, and one way to use more directives is to adopt the directive composition API<\/a>.<\/p>\n\n\n\n

Let’s consider our previous example of a list of items:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Let’s assume we want to make our list flexible enough to support re-ordering items using drag and drop. To do so, we could start using multiple different directives on the same element, such as cdkOption<\/code> and cdkDrag<\/code> (code example here on Stackblitz<\/a>):<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

While the above code works, it’s designed for a one-time use case. If we know that our application will use several droplists that support drag-and-drop, we should start thinking about creating our own custom directive that refactors these different features in one place. Enter the directive composition API:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This new directive draggableOption<\/code> is composed of both cdkOption<\/code> and cdkDrag<\/code> to achieve the desired result. We have one input text that is forwarded to the cdkOption<\/code> input thanks to this syntax:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Note that both inputs and outputs can be forwarded that way (code examples here<\/a>). The beauty of this approach is that our new directive has very little code while packing reusable features in a concise syntax. This is how we would use our new directive:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

You can find that example live on Stackblitz here<\/a>. There are a few caveats with the directive composition API, mainly that it only works with standalone directives<\/a> and that the options to “forward” inputs and outputs are limited for now. However, the composition API is an excellent option to make our code more reusable and immune to copying and pasting collections of directives from one component to another.<\/p>\n","protected":false},"excerpt":{"rendered":"

In the past few weeks, we’ve covered different examples of directives, such as the CDK Listbox directive and the CDK Drag and Drop directive. I have mentioned that directives are underused in Angular applications these days, and one way to use more directives is to adopt the directive composition API. Let’s consider our previous example […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,11],"tags":[],"class_list":["post-1611","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-directives"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1611"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1611\/revisions"}],"predecessor-version":[{"id":1617,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1611\/revisions\/1617"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}