{"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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t