{"id":27610,"date":"2024-05-13T11:04:09","date_gmt":"2024-05-13T09:04:09","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=27610"},"modified":"2024-05-13T11:04:10","modified_gmt":"2024-05-13T09:04:10","slug":"angular-fallback-content-in-ng-content","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/","title":{"rendered":"Angular fallback content in ng-content"},"content":{"rendered":"\n

Angular v18<\/strong> recently introduced a new feature to easily define a fallback content in ng-content<\/strong><\/code> elements. In this article, I will discuss about it.<\/p>\n\n\n\n

However, before diving into it, I will also explore how it was already possible to achieve the same result in Angular v17 or earlier versions<\/strong>.<\/p>\n\n\n\n

\n\n\n\n

When building flexible and reusable UI components, content projection<\/strong> stands as a fundamental tool at your disposal. It is a pattern in which you insert, or project<\/strong>, the content you want to use inside another component.<\/p>\n\n\n\n

When configuring a component, defining a fallback content<\/strong> can be useful to ensure something is displayed if no content is provided.<\/p>\n\n\n\n

Define fallback content in ng-content elements<\/h2>\n\n\n\n

Up until Angular v18<\/strong>, there was not a built-in support to fallback content for ng-content<\/strong><\/code>. However, this didn\u2019t imply there was no workaround.<\/p>\n\n\n\n

Let\u2019s take a look at one of the potential implementation strategies:<\/p>\n\n\n

import<\/span> { Component, ElementRef, computed, viewChild } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  selector: 'my-component'<\/span>,\n<\/span><\/span>  template: `<\/span>\n<\/span><\/span>    @if(!hasContent()){<\/span>\n<\/span><\/mark>      <div> Default content <\/div><\/span>\n<\/span><\/mark>    }<\/span>\n<\/span><\/mark><\/span>\n<\/span><\/span>    <div #wrapper><\/span>\n<\/span><\/span>      <ng-content><\/ng-content><\/span>\n<\/span><\/span>    <\/div><\/span>\n<\/span><\/span>  `<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  wrapper = viewChild.required<ElementRef<HTMLDivElement>>('wrapper'<\/span>);\n<\/span><\/span>\n<\/span><\/span>  hasContent = computed(\n<\/span><\/mark>    ()<\/span> =><\/span> this<\/span>.wrapper().nativeElement.innerHTML.length > 0<\/span>\n<\/span><\/mark>  );\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
The idea behind it is to wrap the ng-content<\/strong><\/code> within an element, and utilize the viewChild<\/strong><\/code> API to determine whether there is projected content or not.<\/p>\n\n\n\n
Then, based on that, the fallback content is displayed using the @if<\/strong><\/code> API provided by the new control flow<\/a>, or the ngIf<\/strong><\/code> directive.<\/p>\n\n\n\n
\n
Note:<\/strong> in older versions of Angular<\/strong> you may need to refactor this a bit, but I hope the concept of this strategy is clear. If not please feel free to contact me \ud83e\udef6\ud83c\udffb<\/em><\/p>\n<\/blockquote>\n\n\n\n
\n\n\n\n
Angular v18: fallback content in ng-content<\/h2>\n\n\n\n
Starting from Angular v18<\/strong>, implementing a fallback content<\/strong> in ng-content<\/strong><\/code> elements is extremely easier.<\/p>\n\n\n\n
You just need to put the fallback content<\/strong> inside the ng-content<\/strong><\/code> tag:<\/p>\n\n\n
import<\/span> { Component } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  selector: 'my-component'<\/span>,\n<\/span><\/span>  template: `<\/span>\n<\/span><\/span>    <ng-content select=\"header\"> Default header <\/ng-content><\/span>\n<\/span><\/mark><\/span>\n<\/span><\/span>    <ng-content> Default main content <\/ng-content><\/span>\n<\/span><\/mark><\/span>\n<\/span><\/span>    <ng-content select=\"footer\"> Default footer <\/ng-content><\/span>\n<\/span><\/mark>  `<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyComponent {}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
As you can see, this new feature allows you to easily define a dedicated fallback content<\/strong> for each ng-content<\/strong><\/code> element in your component.<\/p>\n\n\n\n
So, considering the following example:<\/p>\n\n\n
<my-component<\/span>><\/span>\n<\/span><\/span>  <footer<\/span>><\/span> New footer <\/footer<\/span>><\/span>\n<\/span><\/mark><\/my-component<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The resulting template will be:<\/p>\n\n\n
Default header\n<\/span><\/span>\n<\/span><\/span>Default main content\n<\/span><\/span>\n<\/span><\/span><footer<\/span>><\/span> New footer <\/footer<\/span>><\/span>\n<\/span><\/mark><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
Note:<\/strong> before Angular v18<\/strong>, this would result in an error<\/strong> being thrown \u274c<\/em><\/p>\n<\/blockquote>\n\n\n
\n
\"\"
TLDR<\/strong>: is this a good summary? \ud83e\udd2d<\/figcaption><\/figure><\/div>\n\n\n
\n\n\n\n
Fallback content strategies limitations<\/h3>\n\n\n\n
It is important to highlight that both strategies share the same limitation: Angular content projection is evaluated on component creation<\/strong>.<\/p>\n\n\n\n
This means that if you render the projected content conditionally, for example using an @if<\/strong><\/code> condition or the ngIf<\/strong><\/code> directive, the fallback content will not be displayed, even if the associated condition is set to false<\/strong><\/code>.<\/p>\n\n\n\n
This limitation can be easily overcome, with different solutions depending on the specific use case you might have, but it\u2019s important to remember about it when implementing the strategies I\u2019ve presented.<\/p>\n\n\n\n
\n\n\n\n
Thanks for reading so far \ud83d\ude4f<\/h2>\n\n\n\n
I\u2019d like to have your feedback so please feel free to contact me for any. \ud83d\udc4f<\/em><\/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":"
Angular v18 recently introduced a new feature to easily define a fallback content in ng-content elements. In this article, I will discuss about it. However, before diving into it, I will also explore how it was already possible to achieve the same result in Angular v17 or earlier versions. When building flexible and reusable UI… 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":[20,31],"tags":[],"collections":[],"class_list":{"0":"post-27610","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-languages","8":"category-web-developer","9":"entry"},"yoast_head":"\nAngular fallback content in ng-content - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Angular v18 recently introduced a new feature to easily define a fallback content in ng-content elements. Discover more here!\" \/>\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\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular fallback content in ng-content\" \/>\n<meta property=\"og:description\" content=\"Angular v18 recently introduced a new feature to easily define a fallback content in ng-content elements. Discover more here!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-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:04:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-13T09:04:10+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\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular fallback content in ng-content\",\"datePublished\":\"2024-05-13T09:04:09+00:00\",\"dateModified\":\"2024-05-13T09:04:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/\"},\"wordCount\":441,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png\",\"articleSection\":[\"Languages and frameworks\",\"Web Developer\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/\",\"name\":\"Angular fallback content in ng-content - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png\",\"datePublished\":\"2024-05-13T09:04:09+00:00\",\"dateModified\":\"2024-05-13T09:04:10+00:00\",\"description\":\"Angular v18 recently introduced a new feature to easily define a fallback content in ng-content elements. Discover more here!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-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\/frontend\/web-developer\/angular-fallback-content-in-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\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Developer\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular fallback content in 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 fallback content in ng-content - Codemotion Magazine","description":"Angular v18 recently introduced a new feature to easily define a fallback content in ng-content elements. Discover more here!","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\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/","og_locale":"en_US","og_type":"article","og_title":"Angular fallback content in ng-content","og_description":"Angular v18 recently introduced a new feature to easily define a fallback content in ng-content elements. Discover more here!","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-05-13T09:04:09+00:00","article_modified_time":"2024-05-13T09:04:10+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\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular fallback content in ng-content","datePublished":"2024-05-13T09:04:09+00:00","dateModified":"2024-05-13T09:04:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/"},"wordCount":441,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png","articleSection":["Languages and frameworks","Web Developer"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/","name":"Angular fallback content in ng-content - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/image.png","datePublished":"2024-05-13T09:04:09+00:00","dateModified":"2024-05-13T09:04:10+00:00","description":"Angular v18 recently introduced a new feature to easily define a fallback content in ng-content elements. Discover more here!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-ng-content\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/angular-fallback-content-in-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\/frontend\/web-developer\/angular-fallback-content-in-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\/frontend\/"},{"@type":"ListItem","position":3,"name":"Web Developer","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/"},{"@type":"ListItem","position":4,"name":"Angular fallback content in 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 recently introduced a new feature to easily define a fallback content in ng-content elements. In this article, I will discuss about it. However, before diving into it, I will also explore how it was already possible to achieve the same result in Angular v17 or earlier versions. When building flexible and reusable UI……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27610","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=27610"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27610\/revisions"}],"predecessor-version":[{"id":27674,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27610\/revisions\/27674"}],"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=27610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=27610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=27610"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=27610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}