{"id":26503,"date":"2024-03-27T10:21:36","date_gmt":"2024-03-27T09:21:36","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=26503"},"modified":"2024-04-03T23:43:34","modified_gmt":"2024-04-03T21:43:34","slug":"angular-hostattributetoken-the-new-way-to-inject-attributes","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/","title":{"rendered":"Angular HostAttributeToken: the new way to inject attributes"},"content":{"rendered":"\n

Over the recent months, Angular<\/strong> has been evolving rapidly, introducing new features and a ton of improvements, many of these to improve maintainability and performance.<\/p>\n\n\n\n

In this article I want to introduce you to the latest addition brought by Angular v17.3.0<\/strong>: the new HostAttributeToken<\/strong> class.<\/p>\n\n\n\n

This new API allows you to inject host attributes using the inject( ) function<\/strong>, similar to the functionality of the @Attribute<\/strong> decorator.<\/p>\n\n\n\n

The @Attribute<\/strong> decorator is perhaps the lesser-known Angular decorators.
Therefore, before delving into how the HostAttributeToken class<\/strong> works, let\u2019s take a moment to review the fundamentals.<\/p>\n\n\n\n

\n\n\n\n

@Attribute: do you really need an input?<\/h3>\n\n\n\n

Let\u2019s start with a simple scenario in which you want to develop a component requiring a configurable property<\/strong>.<\/p>\n\n\n\n

Specifically, you want to provide this property as a constant string literal<\/strong>, because it will not change throughout runtime:<\/p>\n\n\n

<my-divider<\/span> size<\/span>=\"small\"<\/span> \/><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
What you would normally do is to create an input<\/strong> for that property:<\/p>\n\n\n
import<\/span> { Component, Input } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>export<\/span> type<\/span> DividerSize = 'small'<\/span> | 'big'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-divider'<\/span>,\n<\/span><\/span>  template: '<hr [class]=\"size\" \/>'<\/span>,\n<\/span><\/mark>  standalone: true<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyDivider {\n<\/span><\/span>  @Input<\/span>() size: DividerSize;\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Which is fine and works quite well. Perhaps too much\u2026<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
By creating an input, you are instructing Angular<\/strong> to create a binding to that property and check it during each change detection cycle.<\/p>\n\n\n\n
That is really excessive, you only need that property to be checked once<\/strong> during component initialization. \ud83e\udd2f<\/p>\n\n\n\n
To make this more performant you can instead inject the host-element attribute<\/strong> in the constructor<\/strong> thanks to the @Attribute<\/strong> decorator:<\/p>\n\n\n
import<\/span> { Attribute, Component } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>export<\/span> type<\/span> DividerSize = 'small'<\/span> | 'big'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-divider'<\/span>,\n<\/span><\/span>  template: '<hr [class]=\"size\" \/>'<\/span>,\n<\/span><\/mark>  standalone: true<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyDivider {\n<\/span><\/span>  constructor<\/span>(@Attribute<\/span>('size'<\/span>) size: string<\/span><\/span>) {}\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Using @Attribute,<\/strong> Angular will read the value only once<\/strong> and never again.<\/p>\n\n\n\n
\n
Note:<\/strong> This approach works as well with Directives<\/strong>, feel free to give it a shot!!!<\/p>\n<\/blockquote>\n\n\n\n
\n\n\n\n
Now that we have covered the basics, let me introduce you to the main topic of this article: the new HostAttributeToken<\/strong> class.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Inject an Attribute using HostAttributeToken class<\/h3>\n\n\n\n
With the release of Angular 14 there is now a cleaner approach to inject providers without using the constructor class: the inject<\/strong> function.<\/p>\n\n\n\n
Up until now, this inject function<\/strong> allowed to inject<\/strong> easily components, directives and pipes, but it was missing a method to inject host attributes.<\/p>\n\n\n\n
And that\u2019s precisely why the HostAttributeToken class<\/strong> was introduced:<\/p>\n\n\n
import<\/span> { Component, HostAttributeToken, inject } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>export<\/span> type DividerSize = 'small'<\/span> | 'big'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component({\n<\/span><\/span>  selector<\/span>: 'my-divider'<\/span>,\n<\/span><\/span>  template<\/span>: '<hr [class]=\"size\" \/>'<\/span>,\n<\/span><\/mark>  standalone<\/span>: true<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyDivider<\/span> <\/span>{\n<\/span><\/span>  size<\/span>: string = inject( new<\/span> HostAttributeToken('size'<\/span>) );\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
By injecting an HostAttributeToken class<\/strong> within the inject function<\/strong>, you get the corresponding host-element attribute<\/strong> value.<\/p>\n\n\n\n
This new API works similarly to @Attribute<\/strong>, with a notable difference: instead of returning null<\/strong> when the attribute is missing, it throws an error<\/strong>.<\/p>\n\n\n
\n
\"\"
\ud83d\udd25 Error: NG0201: No provider for HostAttributeToken size found. \ud83d\udd25<\/figcaption><\/figure><\/div>\n\n\n
This change was made to align the behavior with other injection tokens.<\/p>\n\n\n\n
\n\n\n\n
Thanks for reading so far \ud83d\ude4f<\/h3>\n\n\n\n
I\u2019d like to have your feedback so please feel free to contact me for any. \ud83d\udc4b<\/p>\n\n\n\n
Then, if you really liked it, share it<\/strong> among your community, tech bros, and whoever you want. \ud83d\udc4b\ud83d\ude01<\/p>\n","protected":false},"excerpt":{"rendered":"
Over the recent months, Angular has been evolving rapidly, introducing new features and a ton of improvements, many of these to improve maintainability and performance. In this article I want to introduce you to the latest addition brought by Angular v17.3.0: the new HostAttributeToken class. This new API allows you to inject host attributes using… Read more<\/a><\/p>\n","protected":false},"author":200,"featured_media":26774,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[20],"tags":[],"collections":[],"class_list":{"0":"post-26503","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-languages","8":"entry"},"yoast_head":"\nAngular HostAttributeToken: the new way to inject attributes - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Angular new HostAttributeToken API allows you to inject host attributes using the inject function, similar to the @Attribute decorator.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular HostAttributeToken: the new way to inject attributes\" \/>\n<meta property=\"og:description\" content=\"Angular new HostAttributeToken API allows you to inject host attributes using the inject function, similar to the @Attribute decorator.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-27T09:21:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T21:43:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Davide Passafaro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Davide Passafaro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular HostAttributeToken: the new way to inject attributes\",\"datePublished\":\"2024-03-27T09:21:36+00:00\",\"dateModified\":\"2024-04-03T21:43:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/\"},\"wordCount\":442,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png\",\"articleSection\":[\"Languages and frameworks\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/\",\"name\":\"Angular HostAttributeToken: the new way to inject attributes - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png\",\"datePublished\":\"2024-03-27T09:21:36+00:00\",\"dateModified\":\"2024-04-03T21:43:34+00:00\",\"description\":\"Angular new HostAttributeToken API allows you to inject host attributes using the inject function, similar to the @Attribute decorator.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png\",\"width\":1200,\"height\":675,\"caption\":\"angular token ainject attributes by davide passafaro at codemotion magazine. HostAttributeToken\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Languages and frameworks\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/languages\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular HostAttributeToken: the new way to inject attributes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\",\"name\":\"Davide Passafaro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"caption\":\"Davide Passafaro\"},\"description\":\"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/davide-passafaro\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular HostAttributeToken: the new way to inject attributes - Codemotion Magazine","description":"Angular new HostAttributeToken API allows you to inject host attributes using the inject function, similar to the @Attribute decorator.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/","og_locale":"en_US","og_type":"article","og_title":"Angular HostAttributeToken: the new way to inject attributes","og_description":"Angular new HostAttributeToken API allows you to inject host attributes using the inject function, similar to the @Attribute decorator.","og_url":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-03-27T09:21:36+00:00","article_modified_time":"2024-04-03T21:43:34+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png","type":"image\/png"}],"author":"Davide Passafaro","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Davide Passafaro","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular HostAttributeToken: the new way to inject attributes","datePublished":"2024-03-27T09:21:36+00:00","dateModified":"2024-04-03T21:43:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/"},"wordCount":442,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png","articleSection":["Languages and frameworks"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/","url":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/","name":"Angular HostAttributeToken: the new way to inject attributes - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png","datePublished":"2024-03-27T09:21:36+00:00","dateModified":"2024-04-03T21:43:34+00:00","description":"Angular new HostAttributeToken API allows you to inject host attributes using the inject function, similar to the @Attribute decorator.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png","width":1200,"height":675,"caption":"angular token ainject attributes by davide passafaro at codemotion magazine. HostAttributeToken"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/languages\/angular-hostattributetoken-the-new-way-to-inject-attributes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Languages and frameworks","item":"https:\/\/www.codemotion.com\/magazine\/languages\/"},{"@type":"ListItem","position":3,"name":"Angular HostAttributeToken: the new way to inject attributes"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828","name":"Davide Passafaro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","caption":"Davide Passafaro"},"description":"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.","sameAs":["https:\/\/www.linkedin.com\/in\/davide-passafaro\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-600x600.png","author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png",1200,675,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png",1200,675,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png",1200,675,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_comment_info":0,"uagb_excerpt":"Over the recent months, Angular has been evolving rapidly, introducing new features and a ton of improvements, many of these to improve maintainability and performance. In this article I want to introduce you to the latest addition brought by Angular v17.3.0: the new HostAttributeToken class. This new API allows you to inject host attributes using……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/200"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=26503"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26503\/revisions"}],"predecessor-version":[{"id":26930,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26503\/revisions\/26930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/26774"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=26503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=26503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=26503"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=26503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}