{"id":2338,"date":"2022-10-29T03:58:11","date_gmt":"2022-10-29T01:58:11","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2338"},"modified":"2022-10-29T03:58:11","modified_gmt":"2022-10-29T01:58:11","slug":"understanding-directive-composition-api-in-angular","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/10\/29\/understanding-directive-composition-api-in-angular\/","title":{"rendered":"Understanding Directive composition API in Angular"},"content":{"rendered":"\n

Angular team introduced a new feature called\u00a0\u201cDirective composition API\u201d in Angular 15<\/strong>\u00a0Version.<\/p>\n\n\n\n

Let\u2019s understand what is this directive composition in Angular.<\/p>\n\n\n\n

We will create simple directive in Angular which apply the CSS color to an Angular component.<\/p>\n\n\n\n

ng generate directive redColor<\/code><\/pre>\n\n\n\n
And in the directive definition we add the below code:<\/p>\n\n\n\n
import { Directive } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appRedcolor]',\r\n  host: { style: 'color:red' },\r\n})\r\nexport class RedcolorDirective {\r\n  constructor() {}\r\n}<\/code><\/pre>\n\n\n\n
Now apply the directive to a component in Angular.<\/p>\n\n\n\n
ng generate component testdirective<\/code><\/pre>\n\n\n\n
And in the component HTML add the\u00a0redColor<\/code>\u00a0directive.<\/p>\n\n\n\n
<app-testdirective appRedColor><\/app-testdirective>\r\n\r\n\/\/Inside testdirective.component.html\r\n\r\n<p> Hello I am displayed in red color using directive<\/p><\/code><\/pre>\n\n\n\n
Now the text inside\u00a0testdirective<\/code>\u00a0component will be displayed in\u00a0red<\/code>\u00a0color.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Now using Directive composition API we can directly add the directive inside component declaration using\u00a0hostDirectives<\/code>\u00a0property.<\/p><\/blockquote>\n\n\n\n
import { Component } from '@angular\/core';\r\nimport { RedColorDirective } from '..\/red-color.directive';\r\n\r\n\r\n@Component({\r\n  selector: 'app-testdirective',\r\n  templateUrl: '.\/testdirective.component.html',\r\n  styleUrls: ['.\/testdirective.component.scss'],\r\n  hostDirectives:[RedColorDirective]<\/span>\r\n})\r\nexport class TestdirectiveComponent {\r\n}\r\n<\/code><\/pre>\n\n\n\n
No need anymore to add\u00a0appRedColor<\/code>\u00a0directive to the component.<\/p>\n\n\n\n
<app-testdirective><\/app-testdirective><\/code><\/pre>\n\n\n\n
But here is the catch, you will get an error saying\u00a0Host directive must me standalone<\/strong><\/p>\n\n\n\n
error NG2014: Host directive RedColorDirective must be standalone\r\n\r\nhostDirectives:[RedColorDirective]<\/code><\/pre>\n\n\n\n
That means we can add only standalone directives in hostDirectives<\/code> array<\/strong>.<\/p>\n\n\n\n
Let\u2019s make our directive stand alone by adding\u00a0standalone<\/code>\u00a0property inside directive declaration and remove the definition from the\u00a0app.module<\/strong>.ts<\/code>\u00a0file.<\/p>\n\n\n\n
import { Directive } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appRedColor]',\r\n  host:{'style': 'color:red;'},\r\n  standalone: true\r\n})\r\nexport class RedColorDirective {\r\n\r\n  constructor() { }\r\n\r\n}<\/code><\/pre>\n\n\n\n
Now the text inside\u00a0testdirective<\/code>\u00a0component will be displayed in red color, and our code looks simple without adding an extra directive in component tag.<\/p>\n\n\n\n
<app-testdirective><\/app-testdirective><\/code><\/pre>\n\n\n\n
PS:<\/strong> We can add more than one directive inside\u00a0hostDirectives<\/code>\u00a0property.<\/em><\/p>\n\n\n\n
@Component({\r\n  selector: 'app-testdirective',\r\n  templateUrl: '.\/testdirective.component.html',\r\n  styleUrls: ['.\/testdirective.component.scss'],\r\n  hostDirectives:[RedColorDirective,AnotherDirective,......]\r\n})\r\nexport class TestdirectiveComponent {\r\n}<\/code><\/pre>\n\n\n\n
PS 2 :  we can create standalone directives with the following command Line : <\/p>\n\n\n\n
ng generate directive directiveName --standalone=true<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Reference :  https:\/\/www.angularjswiki.com\/<\/h5>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Angular team introduced a new feature called\u00a0\u201cDirective composition API\u201d in Angular 15\u00a0Version. Let\u2019s understand what is this directive composition in Angular. We will create simple directive in Angular which apply the CSS color to an Angular component. And in the directive definition we add the below code: Now apply the directive to a component in […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[623,28,624,622,625],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2338"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2338"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2338\/revisions"}],"predecessor-version":[{"id":2339,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2338\/revisions\/2339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}