{"id":2364,"date":"2019-04-03T14:52:04","date_gmt":"2019-04-03T12:52:04","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2364"},"modified":"2019-04-03T14:52:04","modified_gmt":"2019-04-03T12:52:04","slug":"angular-elements-part-i","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/","title":{"rendered":"Angular Elements, Part I"},"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<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>Beginning with version 6, we can expose Angular Components as Web Components or to be more precise: As Custom Elements which is one of the standards behind the umbrella term Web Components. They can be reused with each framework and even with VanillaJS. In addition to that, we can very easily create them at runtime because they are rendered by the browser. Dynamically adding new Web Components to a page is just a matter of creating DOM nodes.<\/p>\n<p>Here, I'm using this idea to build a dynamic dashboard.<\/p>\n<p><img decoding=\"async\" width=\"100%\" src=\"https:\/\/i.imgur.com\/7wp1Hs5.png\" alt=\"Dynamic Dashboard\"><\/p>\n<p>The <a href=\"https:\/\/github.com\/manfredsteyer\/angular-elements-dashboard\">source code<\/a>&nbsp;can be found in my <a href=\"https:\/\/github.com\/manfredsteyer\/angular-elements-dashboard\">github repo<\/a>. This example is also used in our <a href=\"https:\/\/www.angulararchitects.io\/schulung\/angular-advanced\" style=\"background-color: rgb(255, 255, 255);\">Angular Training<\/a> for Enterprise Architectures.<\/p>\n<h2 id=\"step-1-installing-angular-elements-and-polyfills\">Step 1: Installing Angular Elements and Polyfills<\/h2>\n<p>It is no surprise that Angular Elements can be installed via npm. In addition to this, I also install the <code>@webcomponents\/custom-elements<\/code> which polyfills Custom Elements back to Internet Explorer 11.<\/p>\n<pre><code>npm i @angular\/elements --save\nnpm i @webcomponents\/custom-elements --save\n<\/code><\/pre>\n<p>After this, reference the polyfill at the end of your <code>polyfills.ts<\/code>:<\/p>\n<pre><code>import '@webcomponents\/custom-elements\/custom-elements.min';\n<\/code><\/pre>\n<p>Another file of this package needs to be referenced in your <code>angular.json<\/code>:<\/p>\n<pre><code>\"scripts\": [\n  \"node_modules\/@webcomponents\/custom-elements\/src\/native-shim.js\"\n]\n<\/code><\/pre>\n<p>It is needed for browsers that do support Web Components when we downlevel our source code to EcmaScript 5 as Web Components are defined for EcmaScript 2015+.<\/p>\n<p>As an alternative, you could also install <code>@angular\/elements<\/code> with the new <code>ng add<\/code> command:<\/p>\n<pre><code>ng add @angular\/elements\n<\/code><\/pre>\n<p>This command also downloads a polyfill and references it in your <code>angular.json<\/code>. It is a  slimmer than the one I'm using here but does not support Internet Explorer 11.<\/p>\n<h2 id=\"step-2-create-your-angular-components\">Step 2: Create your Angular Components<\/h2>\n<p>The dashboard tile, I want to expose as a Web Component looks like this:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-meta\">@Component<\/span>({\n  <span class=\"hljs-comment\">\/\/ selector: 'app-dashboard-tile',<\/span>\n  templateUrl: <span class=\"hljs-string\">'.\/dashboard-tile.component.html'<\/span>,\n  styleUrls: [<span class=\"hljs-string\">'.\/dashboard-tile.component.css'<\/span>]\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> DashboardTileComponent  {\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}\n<\/div><\/code><\/pre>\n<p>I'm not using a selector because the Custom Element gets one assigned when it is registered. This way, I'm preventing naming conflicts.<\/p>\n<h2 id=\"step-3-register-your-angular-component-as-a-custom-element\">Step 3: Register your Angular Component as a Custom Element<\/h2>\n<p>For exposing an Angular Component as a Custom Element, we need to declare it and put it into the <code>entryComponents<\/code> section of a module. This is necessary because Angular Elements is creating it dynamically at runtime:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-meta\">@NgModule<\/span>({\n  [\u2026],\n  declarations: [\n    [\u2026]\n    DashboardTileComponent\n  ],\n  entryComponents: [\n    DashboardTileComponent\n  ]\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> DashboardModule { \n\n  <span class=\"hljs-keyword\">constructor<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">private<\/span> injector: Injector<\/span>) {\n\n    <span class=\"hljs-keyword\">const<\/span> tileCE = createCustomElement(DashboardTileComponent, { injector: <span class=\"hljs-keyword\">this<\/span>.injector });\n    customElements.define(<span class=\"hljs-string\">'dashboard-tile'<\/span>, tileCE);\n\n  }\n\n}\n<\/div><\/code><\/pre>\n<p>The method <code>createCustomElement<\/code> wraps the <code>DashboardTileComponent<\/code> so that it looks like a Web Component. Using <code>customElements.define<\/code> we can register it with the browser.<\/p>\n<h2 id=\"step-4-use-the-custom-element\">Step 4: Use the Custom Element<\/h2>\n<p>Now, we can use the Custom Element like all other build-in HTML tags:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">dashboard-tile<\/span> <span class=\"hljs-attr\">a<\/span>=<span class=\"hljs-string\">\"100\"<\/span> <span class=\"hljs-attr\">b<\/span>=<span class=\"hljs-string\">\"50\"<\/span> <span class=\"hljs-attr\">c<\/span>=<span class=\"hljs-string\">\"25\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">dashboard-tile<\/span>&gt;<\/span>\n<\/div><\/code><\/pre>\n<p>As the browser renders it, Angular is not aware of the element name <code>dashboard-tile<\/code>. To prevent it from throwing an error, we have to use the <code>CUSTOM_ELEMENTS_SCHEMA<\/code>:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-meta\">@NgModule<\/span>({\n  [\u2026]\n  schemas: [\n    CUSTOM_ELEMENTS_SCHEMA\n  ]\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> AppModule {\n}\n<\/div><\/code><\/pre>\n<p>We can even dynamically create a DOM node with it which is one key to dynamic UIs:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-keyword\">const<\/span> tile = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'dashboard-tile'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'class'<\/span>, <span class=\"hljs-string\">'col-lg-4 col-md-3 col-sm-2'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'a'<\/span>, <span class=\"hljs-string\">'100'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'b'<\/span>, <span class=\"hljs-string\">'50'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'c'<\/span>, <span class=\"hljs-string\">'25'<\/span>);\n\n<span class=\"hljs-keyword\">const<\/span> content = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'content'<\/span>);\ncontent.appendChild(tile);\n<\/div><\/code><\/pre>\n<p>If you want to make sure that your application also supports other environments -- e. g. for server side rendering or hybrid apps -- you should use the <code>Renderer2<\/code> service which abstracts DOM manipulations.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A dynamic dashboard in four steps with Web Components<\/p>\n","protected":false},"author":9,"featured_media":3014,"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-2364","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>Angular Elements, Part I - 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\/angular-elements-part-i\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Elements, Part I - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"A dynamic dashboard in four steps with Web Components\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-03T12:52:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1187\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"3 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\/angular-elements-part-i\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Angular Elements, Part I\",\"datePublished\":\"2019-04-03T12:52:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/\"},\"wordCount\":500,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/\",\"name\":\"Angular Elements, Part I - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png\",\"datePublished\":\"2019-04-03T12:52:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png\",\"width\":2000,\"height\":1187},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Elements, Part I\"}]},{\"@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":"Angular Elements, Part I - 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\/angular-elements-part-i\/","og_locale":"en_US","og_type":"article","og_title":"Angular Elements, Part I - ANGULARarchitects","og_description":"A dynamic dashboard in four steps with Web Components","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/","og_site_name":"ANGULARarchitects","article_published_time":"2019-04-03T12:52:04+00:00","og_image":[{"width":2000,"height":1187,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png","type":"image\/png"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Angular Elements, Part I","datePublished":"2019-04-03T12:52:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/"},"wordCount":500,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/","name":"Angular Elements, Part I - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png","datePublished":"2019-04-03T12:52:04+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.png","width":2000,"height":1187},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-i\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Angular Elements, Part I"}]},{"@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\/2364","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=2364"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2364\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}