{"id":26543,"date":"2024-03-27T10:23:22","date_gmt":"2024-03-27T09:23:22","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=26543"},"modified":"2024-03-27T10:23:24","modified_gmt":"2024-03-27T09:23:24","slug":"angular-hostattributetoken-nuova-vita-agli-attributi","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/","title":{"rendered":"Angular HostAttributeToken: nuova vita agli attributi"},"content":{"rendered":"\n<p>Negli ultimi mesi <strong>Angular<\/strong> \u00e8 evoluto rapidamente, introducendo nuove funzionalit\u00e0 e tantissimi miglioramenti, molti dei quali con l&#8217;obiettivo di migliorare manutenibilit\u00e0 e prestazioni.<\/p>\n\n\n\n<p>In questo articolo parleremo di una novit\u00e0 introdotta da <strong>Angular v17.3.0<\/strong>: la nuova classe <strong>HostAttributeToken<\/strong>.<\/p>\n\n\n\n<p>Questa nuova API ci consente di iniettare gli attributi dell&#8217;elemento host utilizzando la <strong>funzione inject( )<\/strong>, similmente a come funziona il decoratore <strong>@Attribute<\/strong>.<\/p>\n\n\n\n<p>Il decoratore <strong>@Attribute<\/strong> \u00e8 forse il decoratore di Angular meno conosciuto.<br>Dunque, prima di approfondire il funzionamento della <strong>classe HostAttributeToken<\/strong>, prendiamoci un momento per rivederlo insieme.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-attribute-ci-serve-veramente-un-nbsp-input\">@Attribute: ci serve veramente un&nbsp;input?<\/h3>\n\n\n\n<p>Partiamo da uno scenario semplice in cui vogliamo sviluppare un componente in grado di accettare una variabile di <strong>configurazione<\/strong> dall&#8217;esterno.<\/p>\n\n\n\n<p>Nello specifico, vogliamo fornire questa propriet\u00e0 come una <strong>costante string literal<\/strong>, perch\u00e9 non ci serve aggiornarla a runtime:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">my-divider<\/span> <span class=\"hljs-attr\">size<\/span>=<span class=\"hljs-string\">\"small\"<\/span> \/&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Non ci serve far altro che creare un <strong>input<\/strong> per quella propriet\u00e0:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { Component, Input } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">type<\/span> DividerSize = <span class=\"hljs-string\">'small'<\/span> | <span class=\"hljs-string\">'big'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-meta\">@Component<\/span>({\n<\/span><\/span><span class='shcb-loc'><span>  selector: <span class=\"hljs-string\">'my-divider'<\/span>,\n<\/span><\/span><mark class='shcb-loc'><span>  template: <span class=\"hljs-string\">'&lt;hr &#91;class]=\"size\" \/&gt;'<\/span>,\n<\/span><\/mark><span class='shcb-loc'><span>  standalone: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>})\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> MyDivider {\n<\/span><\/span><mark class='shcb-loc'><span>  <span class=\"hljs-meta\">@Input<\/span>() size: DividerSize;\n<\/span><\/mark><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Ben fatto, grazie a questo input il nostro componente riceve il valore di configurazione.<br>Ma forse \u00e8 un po troppo\u2026<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter has-mobile-text-align-left\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*G91xCJG97p-WV9Wcv2mjZg.jpeg\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p>Creando un input, stiamo chiedendo ad <strong>Angular<\/strong> di creare un binding a quella propriet\u00e0, e quindi di controllarla durante ogni ciclo di change detection.<\/p>\n\n\n\n<p>Questo \u00e8 davvero troppo, a noi basta che la propriet\u00e0 venga controllata solo una volta durante l&#8217;inizializzazione del componente. \ud83e\udd2f<\/p>\n\n\n\n<p>Per migliorare le performance possiamo iniettare piuttosto l&#8217;attributo <strong>host-element<\/strong> nel costruttore grazie al decoratore <strong>@Attribute<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { Attribute, Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">type<\/span> DividerSize = <span class=\"hljs-string\">'small'<\/span> | <span class=\"hljs-string\">'big'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-meta\">@Component<\/span>({\n<\/span><\/span><span class='shcb-loc'><span>  selector: <span class=\"hljs-string\">'my-divider'<\/span>,\n<\/span><\/span><mark class='shcb-loc'><span>  template: <span class=\"hljs-string\">'&lt;hr &#91;class]=\"size\" \/&gt;'<\/span>,\n<\/span><\/mark><span class='shcb-loc'><span>  standalone: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>})\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> MyDivider {\n<\/span><\/span><mark class='shcb-loc'><span>  <span class=\"hljs-keyword\">constructor<\/span>(<span class=\"hljs-params\"><span class=\"hljs-meta\">@Attribute<\/span>(<span class=\"hljs-string\">'size'<\/span>) size: <span class=\"hljs-built_in\">string<\/span><\/span>) {}\n<\/span><\/mark><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Usando <strong>@Attribute<\/strong>, Angular legger\u00e0 il valore solo una volta e mai pi\u00f9.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-center\"><strong>Nota:<\/strong> questo approccio funziona anche con le <strong>Direttive<\/strong>!<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p>Ora che abbiamo rivisto le basi, passiamo all&#8217;argomento principale di questo articolo: la nuova classe <strong>HostAttributeToken<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*FG7khM9oAJBsyCueUDl2eQ.jpeg\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-iniettare-un-attributo-utilizzando-la-classe-hostattributetoken\">Iniettare un attributo utilizzando la classe HostAttributeToken<\/h3>\n\n\n\n<p>Dopo il rilascio di Angular 14, esiste ora un nuovo approccio per iniettare i provider senza utilizzare il costruttore: la funzione <strong>inject<\/strong>.<\/p>\n\n\n\n<p>Finora, la funzione di <strong>inject<\/strong> ci ha permesso di iniettare facilmente componenti, direttive e pipe, ma non vi era modo di iniettare attributi.<\/p>\n\n\n\n<p>Ed \u00e8 proprio per questo scopo che \u00e8 stata introdotta la classe <strong>HostAttributeToken<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { Component, HostAttributeToken, inject } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> type DividerSize = <span class=\"hljs-string\">'small'<\/span> | <span class=\"hljs-string\">'big'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>@Component({\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">selector<\/span>: <span class=\"hljs-string\">'my-divider'<\/span>,\n<\/span><\/span><mark class='shcb-loc'><span>  <span class=\"hljs-attr\">template<\/span>: <span class=\"hljs-string\">'&lt;hr &#91;class]=\"size\" \/&gt;'<\/span>,\n<\/span><\/mark><span class='shcb-loc'><span>  <span class=\"hljs-attr\">standalone<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>})\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyDivider<\/span> <\/span>{\n<\/span><\/span><mark class='shcb-loc'><span>  <span class=\"hljs-attr\">size<\/span>: string = inject( <span class=\"hljs-keyword\">new<\/span> HostAttributeToken(<span class=\"hljs-string\">'size'<\/span>) );\n<\/span><\/mark><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Utilizzando classe <strong>HostAttributeToken<\/strong> all&#8217;interno della funzione <strong>inject<\/strong>, possiamo ottenere il valore di un determinato attributo.<\/p>\n\n\n\n<p>Questa nuova API funziona in modo simile a <strong>@Attribute<\/strong>, con una notevole differenza: invece di restituire <strong>null<\/strong> quando manca l&#8217;attributo, solleva un <strong>errore<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image caption-align-center\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*0CvnBlFLKtvsLG6ypV3mWA.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">\ud83d\udd25 Error: NG0201: No provider for HostAttributeToken size found.&nbsp;\ud83d\udd25<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Questa modifica \u00e8 stata introdotta per allineare il comportamento a quello degli altri injection token.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grazie-per-aver-letto-questo-articolo-nbsp\">Grazie per aver letto questo articolo&nbsp;\ud83d\ude4f<\/h3>\n\n\n\n<p>Mi piacerebbe avere qualche feedback quindi grazie in anticipo per qualsiasi commento. \ud83d\udc4b<\/p>\n\n\n\n<p>Infine, se ti \u00e8 piaciuto davvero tanto, condividilo con la tua community. \ud83d\udc4b\ud83d\ude01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Negli ultimi mesi Angular \u00e8 evoluto rapidamente, introducendo nuove funzionalit\u00e0 e tantissimi miglioramenti, molti dei quali con l&#8217;obiettivo di migliorare manutenibilit\u00e0 e prestazioni. In questo articolo parleremo di una novit\u00e0 introdotta da Angular v17.3.0: la nuova classe HostAttributeToken. Questa nuova API ci consente di iniettare gli attributi dell&#8217;elemento host utilizzando la funzione inject( ), similmente&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/\">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":[10230],"tags":[11586],"collections":[11708],"class_list":{"0":"post-26543","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-linguaggi-programmazione","8":"tag-angular-it","9":"collections-dalla-community","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Angular HostAttributeToken: nuova vita agli attributi - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Angular ha introdotto una nuova classe HostAttributeToken che consente di iniettare attributi host utilizzando la funzione inject, simile al decoratore @Attribute.\" \/>\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\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular HostAttributeToken: nuova vita agli attributi\" \/>\n<meta property=\"og:description\" content=\"Angular ha introdotto una nuova classe HostAttributeToken che consente di iniettare attributi host utilizzando la funzione inject, simile al decoratore @Attribute.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/\" \/>\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:23:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T09:23:24+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\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular HostAttributeToken: nuova vita agli attributi\",\"datePublished\":\"2024-03-27T09:23:22+00:00\",\"dateModified\":\"2024-03-27T09:23:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/\"},\"wordCount\":412,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/image-14.png\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Linguaggi di programmazione\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/\",\"name\":\"Angular HostAttributeToken: nuova vita agli attributi - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/image-14.png\",\"datePublished\":\"2024-03-27T09:23:22+00:00\",\"dateModified\":\"2024-03-27T09:23:24+00:00\",\"description\":\"Angular ha introdotto una nuova classe HostAttributeToken che consente di iniettare attributi host utilizzando la funzione inject, simile al decoratore @Attribute.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/#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\\\/it\\\/linguaggi-programmazione\\\/angular-hostattributetoken-nuova-vita-agli-attributi\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Linguaggi di programmazione\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/linguaggi-programmazione\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular HostAttributeToken: nuova vita agli attributi\"}]},{\"@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\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Immagine-profilo-GDE-430kb-100x100.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Immagine-profilo-GDE-430kb-100x100.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Immagine-profilo-GDE-430kb-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: nuova vita agli attributi - Codemotion Magazine","description":"Angular ha introdotto una nuova classe HostAttributeToken che consente di iniettare attributi host utilizzando la funzione inject, simile al decoratore @Attribute.","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\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/","og_locale":"en_US","og_type":"article","og_title":"Angular HostAttributeToken: nuova vita agli attributi","og_description":"Angular ha introdotto una nuova classe HostAttributeToken che consente di iniettare attributi host utilizzando la funzione inject, simile al decoratore @Attribute.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-03-27T09:23:22+00:00","article_modified_time":"2024-03-27T09:23:24+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\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular HostAttributeToken: nuova vita agli attributi","datePublished":"2024-03-27T09:23:22+00:00","dateModified":"2024-03-27T09:23:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/"},"wordCount":412,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png","keywords":["Angular"],"articleSection":["Linguaggi di programmazione"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/","name":"Angular HostAttributeToken: nuova vita agli attributi - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/image-14.png","datePublished":"2024-03-27T09:23:22+00:00","dateModified":"2024-03-27T09:23:24+00:00","description":"Angular ha introdotto una nuova classe HostAttributeToken che consente di iniettare attributi host utilizzando la funzione inject, simile al decoratore @Attribute.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/#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\/it\/linguaggi-programmazione\/angular-hostattributetoken-nuova-vita-agli-attributi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Linguaggi di programmazione","item":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/"},{"@type":"ListItem","position":3,"name":"Angular HostAttributeToken: nuova vita agli attributi"}]},{"@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\/wp-content\/uploads\/2026\/05\/Immagine-profilo-GDE-430kb-100x100.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/05\/Immagine-profilo-GDE-430kb-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/05\/Immagine-profilo-GDE-430kb-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":"Negli ultimi mesi Angular \u00e8 evoluto rapidamente, introducendo nuove funzionalit\u00e0 e tantissimi miglioramenti, molti dei quali con l&#8217;obiettivo di migliorare manutenibilit\u00e0 e prestazioni. In questo articolo parleremo di una novit\u00e0 introdotta da Angular v17.3.0: la nuova classe HostAttributeToken. Questa nuova API ci consente di iniettare gli attributi dell&#8217;elemento host utilizzando la funzione inject( ), similmente&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26543","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=26543"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26543\/revisions"}],"predecessor-version":[{"id":26781,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26543\/revisions\/26781"}],"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=26543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=26543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=26543"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=26543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}