{"id":27613,"date":"2024-05-13T11:03:01","date_gmt":"2024-05-13T09:03:01","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=27613"},"modified":"2024-05-22T16:24:44","modified_gmt":"2024-05-22T14:24:44","slug":"angular-definire-un-contenuto-di-fallback-per-ng-content","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/","title":{"rendered":"Angular: definire un contenuto di fallback per ng-content"},"content":{"rendered":"\n<p><strong>Angular v18<\/strong> ha recentemente introdotto una nuova funzionalit\u00e0 per definire facilmente un contenuto di fallback per gli elementi <code><strong>ng-content<\/strong><\/code>.<\/p>\n\n\n\n<p>Prima di analizzarla insieme, esploreremo inoltre come in <strong>Angular v17 o versioni precedenti<\/strong> fosse possibile ottenere lo stesso risultato.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p>Nella creazione di componenti UI flessibili e riutilizzabili, la <strong>content projection<\/strong> rappresenta uno strumento fondamentale a nostra disposizione. \u00c8 un pattern grazie a cui possiamo inserire, o <strong>proiettare<\/strong>, il contenuto che desideriamo utilizzare all&#8217;interno di un altro componente.<\/p>\n\n\n\n<p>Proprio in questo contesto, definire un <strong>contenuto di fallback<\/strong> pu\u00f2 essere utile per garantire che questo venga visualizzato se non viene fornito alcun contenuto da proiettare.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-definire-un-contenuto-di-fallback-negli-elementi-ng-content\">Definire un contenuto di fallback negli elementi ng-content<\/h2>\n\n\n\n<p>Nelle versioni precedenti ad <strong>Angular v18<\/strong>, non esisteva una funzionalit\u00e0 specifica per configurare i <strong>contenuti di fallback<\/strong> per <code><strong>ng-content<\/strong><\/code>. Tuttavia, ci\u00f2 non significa che non esistesse una soluzione alternativa.<\/p>\n\n\n\n<p>Diamo un\u2019occhiata a una delle potenziali strategie di implementazione:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" 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, ElementRef, computed, viewChild } <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-meta\">@Component<\/span>({\n<\/span><\/span><span class='shcb-loc'><span>  standalone: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>  selector: <span class=\"hljs-string\">'my-component'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>  template: <span class=\"hljs-string\">`<\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-string\">    @if(!hasContent()){<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-string\">      &lt;div&gt; Default content &lt;\/div&gt;<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-string\">    }<\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-string\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">    &lt;div #wrapper&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">      &lt;ng-content&gt;&lt;\/ng-content&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">    &lt;\/div&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">  `<\/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> MyComponent {\n<\/span><\/span><span class='shcb-loc'><span>  wrapper = viewChild.required&lt;ElementRef&lt;HTMLDivElement&gt;&gt;(<span class=\"hljs-string\">'wrapper'<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>  hasContent = computed(\n<\/span><\/mark><mark class='shcb-loc'><span>    <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-keyword\">this<\/span>.wrapper().nativeElement.innerHTML.length &gt; <span class=\"hljs-number\">0<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>  );\n<\/span><\/mark><span class='shcb-loc'><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\">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>L&#8217;idea alla base \u00e8 quella di racchiudere un <code><strong>ng-content<\/strong><\/code> all&#8217;interno di un elemento, e utilizzare un <code><strong>viewChild<\/strong><\/code> per determinare se \u00e8 presente contenuto proiettato o meno.<\/p>\n\n\n\n<p>Al quel punto, il <strong>contenuto di fallback<\/strong> pu\u00f2 essere gestito utilizzando <strong>@if<\/strong>, direttamente fornita dal <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/\" class=\"ek-link\">nuovo control flow<\/a>, o la direttiva <strong>ngIf<\/strong>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota:<\/strong> per versioni precedenti di <strong>Angular<\/strong> potrebbe essere necessario un piccolo refactor, ma spero che il concetto sia chiaro. In caso contrario, non esitate a contattarmi \ud83e\udef6\ud83c\udffb<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-angular-v18-fallback-content-per-ng-content\">Angular v18: fallback content per ng-content<\/h2>\n\n\n\n<p>A partire da <strong>Angular v18<\/strong>, implementare un <strong>contenuto di fallback<\/strong> negli elementi <code><strong>ng-content<\/strong><\/code> \u00e8 estremamente pi\u00f9 semplice.<\/p>\n\n\n\n<p>Non dobbiamo far altro che inserire il <strong><strong>contenuto di fallback<\/strong><\/strong> all&#8217;interno del tag <code><strong>ng-content<\/strong><\/code>:<\/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 } <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-meta\">@Component<\/span>({\n<\/span><\/span><span class='shcb-loc'><span>  standalone: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>  selector: <span class=\"hljs-string\">'my-component'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>  template: <span class=\"hljs-string\">`<\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-string\">    &lt;ng-content select=\"header\"&gt; Default header &lt;\/ng-content&gt;<\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-string\"><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-string\">    &lt;ng-content&gt; Default main content &lt;\/ng-content&gt;<\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-string\"><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-string\">    &lt;ng-content select=\"footer\"&gt; Default footer &lt;\/ng-content&gt;<\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-string\">  `<\/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> MyComponent {}\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>Come possiamo vedere, questa nuova funzionalit\u00e0 consente di definire facilmente un <strong>contenuto di fallback<\/strong> dedicato per ciascun elemento <code><strong>ng-content<\/strong><\/code> nei componenti.<\/p>\n\n\n\n<p>Quindi, nel caso del seguente esempio:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" 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-component<\/span>&gt;<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">footer<\/span>&gt;<\/span> New footer <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">footer<\/span>&gt;<\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">my-component<\/span>&gt;<\/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\">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>Il template che verr\u00e0 generato sar\u00e0 il seguente:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" 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>Default header\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>Default main content\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">footer<\/span>&gt;<\/span> New footer <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">footer<\/span>&gt;<\/span>\n<\/span><\/mark><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota:<\/strong> nelle versioni precedenti ad <strong>Angular v18<\/strong>, questo esempio solleva un <strong>errore<\/strong> <em>\u274c<\/em><\/p>\n<\/blockquote>\n\n\n<div class=\"wp-block-image caption-align-center\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*_Vb4QbaIgC3J0ynVeMhAfg.jpeg\" alt=\"\" style=\"aspect-ratio:1;width:520px;height:auto\"\/><figcaption class=\"wp-element-caption\"><strong>TLDR<\/strong>: che ne pensi di questo riassunto?&nbsp;\ud83e\udd2d<\/figcaption><\/figure><\/div>\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-un-limite-delle-strategie-appena-viste\">Un limite delle strategie appena viste<\/h3>\n\n\n\n<p>\u00c8 importante sottolineare che entrambe le strategie condividono lo stesso limite: <strong>in Angular la content projection viene elaborata durante la creazione del componente<\/strong>.<\/p>\n\n\n\n<p>Ci\u00f2 significa che se si esegue il rendering del contenuto proiettato in modo condizionale, ad esempio utilizzando una condizione <code><strong>@if<\/strong><\/code> o la direttiva <strong><code><strong>ngIf<\/strong><\/code><\/strong>, il <strong>contenuto di fallback<\/strong> non verr\u00e0 visualizzato, anche se la condizione associata \u00e8 <code><strong>false<\/strong><\/code>.<\/p>\n\n\n\n<p>Questo limite pu\u00f2 essere facilmente superato, con soluzioni diverse in base al caso d\u2019uso specifico che potremmo avere, ma \u00e8 importante tenerlo a mente quando utilizziamo queste strategie.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-grazie-per-aver-letto-questo-articolo-nbsp\">Grazie per aver letto questo articolo&nbsp;\ud83d\ude4f<\/h2>\n\n\n\n<p>Mi piacerebbe avere qualche feedback quindi grazie in anticipo per qualsiasi commento. <em>\ud83d\udc4f<\/em><\/p>\n\n\n\n<p>Infine, se ti \u00e8 piaciuto davvero tanto,&nbsp;<strong>condividilo<\/strong>&nbsp;con la tua community. \ud83d\udc4b\ud83d\ude01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular v18 ha recentemente introdotto una nuova funzionalit\u00e0 per definire facilmente un contenuto di fallback per gli elementi ng-content. Prima di analizzarla insieme, esploreremo inoltre come in Angular v17 o versioni precedenti fosse possibile ottenere lo stesso risultato. Nella creazione di componenti UI flessibili e riutilizzabili, la content projection rappresenta uno strumento fondamentale a nostra&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/\">Read more<\/a><\/p>\n","protected":false},"author":200,"featured_media":27670,"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":[10307],"tags":[12129,12131],"collections":[11708],"class_list":{"0":"post-27613","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-sviluppo-web","8":"tag-angula","9":"tag-fallback","10":"collections-dalla-community","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Angular: definire un contenuto di fallback per ng-content - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Angular v18 ha recentemente introdotto una nuova funzionalit\u00e0 per definire facilmente un contenuto di fallback per gli elementi ng-content.\" \/>\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\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular: definire un contenuto di fallback per ng-content\" \/>\n<meta property=\"og:description\" content=\"Angular v18 ha recentemente introdotto una nuova funzionalit\u00e0 per definire facilmente un contenuto di fallback per gli elementi ng-content.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/\" \/>\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-05-13T09:03:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-22T14:24:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\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\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular: definire un contenuto di fallback per ng-content\",\"datePublished\":\"2024-05-13T09:03:01+00:00\",\"dateModified\":\"2024-05-22T14:24:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/\"},\"wordCount\":434,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png\",\"keywords\":[\"angula\",\"fallback\"],\"articleSection\":[\"Sviluppo Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/\",\"name\":\"Angular: definire un contenuto di fallback per ng-content - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png\",\"datePublished\":\"2024-05-13T09:03:01+00:00\",\"dateModified\":\"2024-05-22T14:24:44+00:00\",\"description\":\"Angular v18 ha recentemente introdotto una nuova funzionalit\u00e0 per definire facilmente un contenuto di fallback per gli elementi ng-content.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png\",\"width\":1080,\"height\":608,\"caption\":\"Angular v18 fallback\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sviluppo Web\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular: definire un contenuto di fallback per ng-content\"}]},{\"@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: definire un contenuto di fallback per ng-content - Codemotion Magazine","description":"Angular v18 ha recentemente introdotto una nuova funzionalit\u00e0 per definire facilmente un contenuto di fallback per gli elementi ng-content.","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\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/","og_locale":"en_US","og_type":"article","og_title":"Angular: definire un contenuto di fallback per ng-content","og_description":"Angular v18 ha recentemente introdotto una nuova funzionalit\u00e0 per definire facilmente un contenuto di fallback per gli elementi ng-content.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-05-13T09:03:01+00:00","article_modified_time":"2024-05-22T14:24:44+00:00","og_image":[{"width":1080,"height":608,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.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\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular: definire un contenuto di fallback per ng-content","datePublished":"2024-05-13T09:03:01+00:00","dateModified":"2024-05-22T14:24:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/"},"wordCount":434,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png","keywords":["angula","fallback"],"articleSection":["Sviluppo Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/","name":"Angular: definire un contenuto di fallback per ng-content - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png","datePublished":"2024-05-13T09:03:01+00:00","dateModified":"2024-05-22T14:24:44+00:00","description":"Angular v18 ha recentemente introdotto una nuova funzionalit\u00e0 per definire facilmente un contenuto di fallback per gli elementi ng-content.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png","width":1080,"height":608,"caption":"Angular v18 fallback"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-definire-un-contenuto-di-fallback-per-ng-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"Sviluppo Web","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/"},{"@type":"ListItem","position":4,"name":"Angular: definire un contenuto di fallback per ng-content"}]},{"@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\/05\/image-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-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\/05\/image.png",1080,608,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png",1080,608,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png",1080,608,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image-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":"Angular v18 ha recentemente introdotto una nuova funzionalit\u00e0 per definire facilmente un contenuto di fallback per gli elementi ng-content. Prima di analizzarla insieme, esploreremo inoltre come in Angular v17 o versioni precedenti fosse possibile ottenere lo stesso risultato. Nella creazione di componenti UI flessibili e riutilizzabili, la content projection rappresenta uno strumento fondamentale a nostra&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27613","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=27613"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27613\/revisions"}],"predecessor-version":[{"id":27673,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27613\/revisions\/27673"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/27670"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=27613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=27613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=27613"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=27613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}