{"id":1114,"date":"2023-06-27T05:00:00","date_gmt":"2023-06-27T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1114"},"modified":"2023-06-23T15:24:09","modified_gmt":"2023-06-23T22:24:09","slug":"how-to-pass-multiple-pieces-of-content-from-one-component-to-another","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-pass-multiple-pieces-of-content-from-one-component-to-another\/","title":{"rendered":"How to pass multiple pieces of content from one component to another?"},"content":{"rendered":"\n

Yesterday, we saw that we could use content projection<\/a> to pass an HTML template from one component to another. But what if we want to pass multiple different templates? We can use multi-slot content projection.<\/p>\n\n\n\n

Here’s what we want to achieve:<\/p>\n\n\n\n

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

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

In our reusable dialog component, we will have multiple ng-content<\/code> elements. Each ng-content<\/code> will have a specific query selecting a template to render:<\/p>\n\n\n

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

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

These queries use the CSS selector<\/a> syntax. In the above example, we’re using []<\/code>, which means we are selecting HTML attribute<\/a> names. As a result, our parent component will pass two distinct templates, one for the body <\/strong>and one for the footer<\/strong>, using the following syntax:<\/p>\n\n\n

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

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

You can see an example of such code in action on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, we saw that we could use content projection to pass an HTML template from one component to another. But what if we want to pass multiple different templates? We can use multi-slot content projection. Here’s what we want to achieve: In our reusable dialog component, we will have multiple ng-content elements. Each ng-content will […]<\/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-1114","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\/1114","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=1114"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1114\/revisions"}],"predecessor-version":[{"id":1119,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1114\/revisions\/1119"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}