{"id":208,"date":"2018-10-31T03:00:39","date_gmt":"2018-10-31T02:00:39","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?post_type=post&amp;p=208"},"modified":"2018-10-31T03:00:39","modified_gmt":"2018-10-31T02:00:39","slug":"content-projection-with-slots-in-angular-elements-7","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/","title":{"rendered":"Content Projection With Slots In Angular Elements (>=7)"},"content":{"rendered":"<div class=\"article\">\n<hr>\n<div style=\"font-size:14px\">\n<b style=\"font-weight: bold\">This blog post is part of an article series.<\/b><\/p>\n<\/p>\n<ul class=\"toc\">\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/13\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx\">Angular Elements, Part I: A Dynamic Dashboard In Four Steps With Web Components<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/29\/angular-elements-part-ii-lazy-and-external-web-components.aspx\">Angular Elements, Part II: Lazy And External Web Components<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/06\/angular-elements-without-zone-js.aspx\">Angular Elements, Part III: Angular Elements without Zone.js<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/10\/31\/content-projection-with-slots-in-angular-elements-7.aspx\" target=\"_blank\" rel=\"noopener\">Angular Elements, Part IV:&nbsp;Content Projection with Slots in Angular Elements (&gt;=7)<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2019\/01\/27\/building-angular-elements-with-the-cli.aspx\">Angular Elements, Part V: Your Options For Building Angular Elements With The CLI<\/a><\/li>\n<\/ul>\n<\/div>\n<hr>\n<p>&nbsp;<\/p>\n<blockquote><p>\nBig thanks to <a href=\"https:\/\/twitter.com\/robwormald\">Rob Wormald<\/a> -- the mastermind behind Angular Elements in the Angular Team -- for reviewing this article.\n<\/p><\/blockquote>\n<p><\/p>\n<p>Since Angular 7, we can use <code>slots<\/code> to project markup into an component's template. These slots have been introduced with Shadow DOM v1 which Angular supports since version 6.1.<\/p>\n<p>This article shows how to use both, Shadow DOM v1 and <code>slots<\/code>. For this, it uses a component that shows a diagram:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/BAx3Tbe.png\" width=\"400\" alt=\"Sample component\"><\/p>\n<p>The title, as well as the description and the legend on the bottom can be adjusted using content projection with <code>slots<\/code>. You can find the <a href=\"https:\/\/github.com\/manfredsteyer\/angular-elements-dashboard\/tree\/ng7\">source code in my GitHub repo<\/a> (branch: ng7):<\/p>\n<p>\u00bb <a href=\"https:\/\/github.com\/manfredsteyer\/angular-elements-dashboard\/tree\/ng7\">Source Code (branch: ng7)<\/a><\/p>\n<p>If this is interesting for you, you might also find our <a href=\"https:\/\/www.angulararchitects.io\/schulung\/angular-advanced\">Angular Workshop<\/a> for Enterprise Architectures of value.<\/p>\n<p><span style=\"color: inherit; font-family: inherit; font-size: 30px;\">Shadow DOM v1<\/span><\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_shadow_DOM\">Shadow DOM<\/a> has always been an central concept for Angular Components. By default, Angular emulates this standard which isolates a component's style from other components. The idea is that one component's local styles shall not interfere with other components.<\/p>\n<p>It's also possible to turn it off or to tell Angular to rely on the Browser's implementation which can provide a better isolation than the emulated one.<\/p>\n<p>However, until Angular 6.1, Angular supported what's known as Shadow DOM v0. Meanwhile, browser vendors agreed on the revised Version 1 which will be widely implemented. At the time of writing, Chrome, Safari, Firefox and Opera already supported it and the Edge-team was currently implementing it.<\/p>\n<p>To use Shadow DOM v1 in Angular (&gt;= 6.1), just set the <code>encapsulation<\/code> property in the <code>Component<\/code> decorator to the newly introduced value <code>ShadowDom<\/code>:<\/p>\n<pre><code class=\"language-typescript\"><div><span class=\"hljs-meta\">@Component<\/span>({\n  selector: <span class=\"hljs-string\">'app-dashboard-tile'<\/span>,\n  templateUrl: <span class=\"hljs-string\">'.\/dashboard-tile.component.html'<\/span>,\n  encapsulation: ViewEncapsulation.ShadowDom\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> DashboardTileComponent <span class=\"hljs-keyword\">implements<\/span> OnInit {\n  <span class=\"hljs-meta\">@Input<\/span>() a: <span class=\"hljs-built_in\">number<\/span>;\n  <span class=\"hljs-meta\">@Input<\/span>() b: <span class=\"hljs-built_in\">number<\/span>;\n  <span class=\"hljs-meta\">@Input<\/span>() c: <span class=\"hljs-built_in\">number<\/span>;\n  [\u2026]\n} \n<\/div><\/code><\/pre>\n<p>Don't confuse <code>ViewEncapsulation.ShadowDom<\/code> with <code>ViewEncapsulation.Native<\/code> which exists since Angular's first days and leverages Shadow DOM v0.<\/p>\n<h2 id=\"slots-for-content-projection\">Slots for Content Projection<\/h2>\n<p>Many Web Components -- or to be more precise, many Custom Elements -- need to be adaptable with some markup passed as the element's content. This is also called content projected because the passed content is projected to different positions of the element's template.<\/p>\n<p>For this, Shadow DOM v1 introduces the <code>slot<\/code> element. Each <code>slot<\/code> marks a position within a template where content can be projected to:<\/p>\n<pre><code class=\"language-typescript\"><div>&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"header\"<\/span>&gt;\n    &lt;h1 <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"title\"<\/span>&gt;&lt;slot name=<span class=\"hljs-string\">\"title\"<\/span>&gt;Standardwert&lt;<span class=\"hljs-regexp\">\/slot&gt;&lt;\/<\/span>h1&gt;\n  &lt;<span class=\"hljs-regexp\">\/div&gt;\n  &lt;div class=\"content\"&gt;\n\n    &lt;div style=\"height:200px\"&gt;\n      &lt;ngx-charts-pie-chart [labels]=\"true\" [results]=\"data\"&gt;\n      &lt;\/<\/span>ngx-charts-pie-chart&gt;\n    &lt;<span class=\"hljs-regexp\">\/div&gt;\n\n    &lt;p&gt;&lt;slot&gt;Standardwert&lt;\/<\/span>slot&gt;&lt;<span class=\"hljs-regexp\">\/p&gt;\n    &lt;i&gt;&lt;slot name=\"legend\"&gt;Standardwert&lt;\/<\/span>slot&gt;&lt;<span class=\"hljs-regexp\">\/i&gt;\n\n  &lt;\/<\/span>div&gt;\n&lt;<span class=\"hljs-regexp\">\/div&gt;\n<\/span><\/div><\/code><\/pre>\n<p>Between the opening and the closing <code>slot<\/code> tags, we can place some default markup that is shown if the caller does not pass any content for it. There can be one default slot and named ones.<\/p>\n<p>When calling such a Custom Element, we can use the <code>slot<\/code> attribute to point to one of the named slots within the component's template:<\/p>\n<pre><code class=\"language-html\"><div><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-sm-3\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">dashboard-tile<\/span> <span class=\"hljs-attr\">a<\/span>=<span class=\"hljs-string\">\"10\"<\/span> <span class=\"hljs-attr\">b<\/span>=<span class=\"hljs-string\">\"5\"<\/span> <span class=\"hljs-attr\">c<\/span>=<span class=\"hljs-string\">\"15\"<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">slot<\/span>=<span class=\"hljs-string\">\"title\"<\/span>&gt;<\/span>Important Stuff<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">slot<\/span>=<span class=\"hljs-string\">\"legend\"<\/span>&gt;<\/span>A, B and C show the values of A, B and C.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n    Only believe in statistics you've faked yourself.\n\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">dashboard-tile<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/div><\/code><\/pre>\n<p>Everything you connect to a slot that way will be projected to it. The rest is put into the default slot.<\/p>\n<h2 id=\"accessing-projected-content\">Accessing Projected Content<\/h2>\n<p>For accessing projected content, Angular provides hooks like <code>ngAfterContentChecked<\/code> or <code>ngAfterContentInit<\/code> as well as content queries using <code>@ViewChild<\/code> and <code>@ViewChildren<\/code>.<\/p>\n<p>Unfortunately, they don't work with slots. But we can make use of the <code>slotschange<\/code> event instead:<\/p>\n<pre><code class=\"language-html\"><div><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">slot<\/span> (<span class=\"hljs-attr\">slotchange<\/span>)=<span class=\"hljs-string\">\"slotChange($event)\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"legend\"<\/span>&gt;<\/span>No Legend available.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">slot<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span>\n<\/div><\/code><\/pre>\n<p>In the set up event handler, we can grab the projected elements:<\/p>\n<pre><code class=\"language-typescript\"><div><span class=\"hljs-meta\">@Component<\/span>({\n  [...]\n  encapsulation: ViewEncapsulation.ShadowDom\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> DashboardTileComponent <span class=\"hljs-keyword\">implements<\/span> OnInit {\n\n  slotChange($event) {\n    <span class=\"hljs-keyword\">const<\/span> assigned = $event.target.assignedNodes();\n    <span class=\"hljs-keyword\">if<\/span> (assigned.length &gt; <span class=\"hljs-number\">0<\/span>) {\n      <span class=\"hljs-built_in\">console<\/span>.debug(<span class=\"hljs-string\">'shotchange'<\/span>, assigned[<span class=\"hljs-number\">0<\/span>]);\n    }\n  }\n\n}\n<\/div><\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt<\/p>\n","protected":false},"author":9,"featured_media":3024,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Content Projection With Slots In Angular Elements (&gt;=7) - ANGULARarchitects<\/title>\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.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Content Projection With Slots In Angular Elements (&gt;=7) - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-31T02:00:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Content Projection With Slots In Angular Elements (>=7)\",\"datePublished\":\"2018-10-31T02:00:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/\"},\"wordCount\":548,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/\",\"name\":\"Content Projection With Slots In Angular Elements (>=7) - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg\",\"datePublished\":\"2018-10-31T02:00:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg\",\"width\":1280,\"height\":960},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Content Projection With Slots In Angular Elements (>=7)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Content Projection With Slots In Angular Elements (>=7) - ANGULARarchitects","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.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/","og_locale":"en_US","og_type":"article","og_title":"Content Projection With Slots In Angular Elements (>=7) - ANGULARarchitects","og_description":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/","og_site_name":"ANGULARarchitects","article_published_time":"2018-10-31T02:00:39+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Content Projection With Slots In Angular Elements (>=7)","datePublished":"2018-10-31T02:00:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/"},"wordCount":548,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/","name":"Content Projection With Slots In Angular Elements (>=7) - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg","datePublished":"2018-10-31T02:00:39+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/10\/cinema-442977-1280.jpg","width":1280,"height":960},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/content-projection-with-slots-in-angular-elements-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Content Projection With Slots In Angular Elements (>=7)"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/3024"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}