{"id":2370,"date":"2025-11-05T03:11:59","date_gmt":"2025-11-05T11:11:59","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2370"},"modified":"2025-11-05T03:12:49","modified_gmt":"2025-11-05T11:12:49","slug":"aliasing-content-for-projection","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/aliasing-content-for-projection\/","title":{"rendered":"Aliasing content for projection"},"content":{"rendered":"\n

We have discussed\u00a0content projection<\/a>\u00a0before, as well as\u00a0multi-slot content projection<\/a>, a t<\/span>echnique where we can pass multiple\u00a0pieces of content from one component to another.<\/p>\n\n\n\n

For instance, this can be useful when we want to customize a header, body, and footer of a card or a modal component. We need several different templates to pass to that component, and multi-slot content projection is ideal for this purpose (see an example in action on Stackblitz here<\/a>).<\/p>\n\n\n\n

The only downside of such content projection is that it relies on selectors, which can be CSS classes, HTML tag names, or other similar elements. While that works, it’s not a great developer experience as it does not show explicitely when a piece of HTML is meant to be projected.<\/p>\n\n\n\n

This is where aliases come into play. If we have the following child component code, expecting two different pieces of projected content:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

With aliases, we can now project anything into those slots by using the attribute ngProjectAs<\/code> in the parent component:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

That way, we no longer rely on CSS selectors. We make it explicit that an element is meant to be projected in a given slot. This results in more robust code as it can’t break when CSS or HTML structures change.<\/p>\n","protected":false},"excerpt":{"rendered":"

We have discussed\u00a0content projection\u00a0before, as well as\u00a0multi-slot content projection, a technique where we can pass multiple\u00a0pieces of content from one component to another. For instance, this can be useful when we want to customize a header, body, and footer of a card or a modal component. We need several different templates to pass to that […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,8],"tags":[],"class_list":["post-2370","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-components"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2370"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2370\/revisions"}],"predecessor-version":[{"id":2374,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2370\/revisions\/2374"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}