{"id":1108,"date":"2023-06-26T05:00:00","date_gmt":"2023-06-26T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1108"},"modified":"2023-06-23T15:12:49","modified_gmt":"2023-06-23T22:12:49","slug":"passing-custom-content-to-a-component-with-content-projection","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/passing-custom-content-to-a-component-with-content-projection\/","title":{"rendered":"Passing custom content to a component with content projection"},"content":{"rendered":"\n

If you’re creating a component library or working on components meant to be as generic and reusable as possible, then content projection should be a major part of your Angular toolkit.<\/p>\n\n\n\n

Let’s take the example of a pop-up window\/dialog component:<\/p>\n\n\n\n

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

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

The main idea of content projection is that the parent component (most likely a container component<\/a>) knows about the current use case of our reusable presentation component<\/a> and can pass custom HTML to it. Such content is passed in the content section of the component, which is the body of the HTML element – what we have between the opening and the closing tag:<\/p>\n\n\n

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

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

Angular projects that content into the template of the child component. We can set the destination of that projection by using an ng-content<\/a><\/code> element in the template of the reusable component as follows:<\/p>\n\n\n

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

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

Content projection is like cutting and pasting<\/strong> some content from one component to another. You can see the full code example here on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

If you’re creating a component library or working on components meant to be as generic and reusable as possible, then content projection should be a major part of your Angular toolkit. Let’s take the example of a pop-up window\/dialog component: The main idea of content projection is that the parent component (most likely a container […]<\/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-1108","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\/1108","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=1108"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1108\/revisions"}],"predecessor-version":[{"id":1113,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1108\/revisions\/1113"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}