{"id":961,"date":"2016-08-17T15:02:57","date_gmt":"2016-08-17T13:02:57","guid":{"rendered":"http:\/\/blog.thecodecampus.de\/?p=961"},"modified":"2025-04-22T10:34:47","modified_gmt":"2025-04-22T08:34:47","slug":"angular-2-dynamically-render-components","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/","title":{"rendered":"Dynamically Render Components with ComponentFactoryResolver in Angular 2"},"content":{"rendered":"<p>In my current project\u00a0I\u00a0came to a situation where it was necessary to drop\u00a0specific components into my view. Since the project is a game and the current view should not be tied to URLs at this point i decided not to use the router but to load my various components dynamically into my view. This gives me the power to handle the logic in one persistent smart component which is bound\u00a0to a URL.<\/p>\n<p>My project was build\u00a0with Ionic 2 and Angular, but i&#8217;ll go with plain Anuglar 2 for this blog post. The\u00a0equivalent approach in Angular 1 would have used the $compile service. In Angular 2 there was a very simple approach using the\u00a0ComponentResolver but the class is deprecated and will be removed from Angular 2. This blog post will guide you how to use the\u00a0ComponentFactoryResolver together with NgModule in order to render Angular 2 components dynamically. This approach is only\u00a0eligible for components that already exist in your application and not for components that will be received trough API calls for example. To live render external compontents take a look in <a href=\"http:\/\/stackoverflow.com\/a\/37044960\/6533425\" target=\"_blank\" rel=\"noopener noreferrer\">this Stackoverflow question<\/a>.<\/p>\n<p>First of all lets create a fresh Angular 2 RC5 project.\u00a0\u00a0Make sure to have the angular-cli webpack beta installed to create a new project with RC5.<\/p>\n<pre class=\"lang:default decode:true\" title=\"terminal\"># Remove old versions\u00a0\r\nnpm uninstall -g angular-cli\r\n\r\n# Install the new version\r\nnpm install --global angular-cli@1.0.0-beta.11-webpack.2\r\n\r\n# Verify everything went good by\r\nng version\u00a0\r\n# -&gt; should return:\u00a0\u00a0angular-cli: 1.0.0-beta.11-webpack.2<\/pre>\n<p>Then create the new project:<\/p>\n<pre class=\"lang:default decode:true\">ng new component-example<\/pre>\n<p>And launch the project with:<\/p>\n<pre class=\"lang:default decode:true\" title=\"terminal\">cd component-example\r\nng serve\r\n<\/pre>\n<p>Now you are all set, lets get started with the actual code! This empty setup provides us with an AppComponent that will act as our host component in which we want to render several child\u00a0components. So lets create the child components first.<\/p>\n<pre class=\"lang:default decode:true\">\u00a0ng generate component child\r\n\u00a0ng generate component another-child<\/pre>\n<p><a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\" style=\"display: inline-block;\">\n<picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_big.png\" media=\"(min-width: 1024px)\"><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_medium.png\" media=\"(min-width: 600px)\"><img decoding=\"async\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_small.png\" alt=\"Angular Schulungen\" class=\"alignnone size-full wp-image-38\">\n<\/picture>\n<\/a><\/p>\n<p>Instead of calling the components in our HTML code we want to inject them via JavaScript when needed. Since we have no logic lets just go with a setTimeout as initiator of the component rendering. Add this dummy code\u00a0to your app components constructor:<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.ts\">import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: 'app.component.html',\r\n  styleUrls: ['app.component.css']\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n  constructor () {\r\n    setTimeout(()=&gt;{\r\n      \/\/ at this point we want the \"child\" component to be rendered into the app.component:\r\n      \r\n      setTimeout(()=&gt;{\r\n        \/\/ at this point we want the \"another-child\" component to be rendered into the app.component:\r\n\r\n      }, 1000);\r\n    }, 1000);\r\n  }\r\n}\r\n<\/pre>\n<p>Now add a DIV to the AppComponent which will hold our child components:<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.html\">&lt;h1&gt;\r\n  {{title}}\r\n&lt;\/h1&gt;\r\n&lt;!--div #parent will contain our child components --&gt;\r\n&lt;div #parent&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>Capture the #parent element in your TypeScript code as follows:<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.compontent.ts\">import {Component, ViewChild, ViewContainerRef} from '@angular\/core';\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: 'app.component.html',\r\n  styleUrls: ['app.component.css']\r\n})\r\nexport class AppComponent {\r\n\r\n  title = 'app works!';\r\n\r\n  @ViewChild('parent', {read: ViewContainerRef})\r\n  parent: ViewContainerRef;\r\n\r\n  constructor () {\r\n    setTimeout(()=&gt;{\r\n      \/\/ at this point we want the \"child\" component to be rendered into the app.component:\r\n      \r\n      setTimeout(()=&gt;{\r\n        \/\/ at this point we want the \"another-child\" component to be rendered into the app.component:\r\n\r\n      }, 1000);\r\n    }, 1000);\r\n  }\r\n}<\/pre>\n<p>To get the components we use the\u00a0ComponentFactoryResolver, inject it into the constructor and declare 2\u00a0variables which will receive our components:<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.ts\">import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver} from '@angular\/core';\r\nimport {ChildComponent} from \".\/child\/child.component\";\r\nimport {AnotherChildComponent} from \".\/another-child\/another-child.component\";\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: 'app.component.html',\r\n styleUrls: ['app.component.css']\r\n})\r\nexport class AppComponent {\r\n\r\n title = 'app works!';\r\n\r\n @ViewChild('parent', {read: ViewContainerRef})\r\n parent: ViewContainerRef;\r\n\r\n constructor (private componentFactoryResolver: ComponentFactoryResolver) {\r\n  const childComponent = this.componentFactoryResolver.resolveComponentFactory(ChildComponent); \r\n  const anotherChildComponent = this.componentFactoryResolver.resolveComponentFactory(AnotherChildComponent)\r\n\r\n setTimeout(()=&gt;{\r\n \/\/ at this point we want the \"child\" component to be rendered into the app.component:\r\n \r\n setTimeout(()=&gt;{\r\n \/\/ at this point we want the \"another-child\" component to be rendered into the app.component:\r\n\r\n }, 1000);\r\n }, 1000);\r\n }\r\n}<\/pre>\n<p>Now we are ready to inject the <em>childComponent<\/em> and the <em>anotherChildComponent<\/em> into our view. To do so call the createComponent method on the parent object.<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.ts\">import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver} from '@angular\/core';\r\nimport {ChildComponent} from \".\/child\/child.component\";\r\nimport {AnotherChildComponent} from \".\/another-child\/another-child.component\";\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: 'app.component.html',\r\n styleUrls: ['app.component.css']\r\n})\r\nexport class AppComponent {\r\n\r\n title = 'app works!';\r\n\r\n @ViewChild('parent', {read: ViewContainerRef})\r\n parent: ViewContainerRef;\r\n\r\n constructor (private componentFactoryResolver: ComponentFactoryResolver) {\r\n const childComponent = this.componentFactoryResolver.resolveComponentFactory(ChildComponent); \r\n const anotherChildComponent = this.componentFactoryResolver.resolveComponentFactory(AnotherChildComponent)\r\n\r\n setTimeout(()=&gt;{\r\n \/\/ at this point we want the \"child\" component to be rendered into the app.component:\r\n  this.parent.createComponent(childComponent);\r\n\r\n setTimeout(()=&gt;{\r\n \/\/ at this point we want the \"another-child\" component to be rendered into the app.component:\r\n this.parent.createComponent(anotherChildComponent);\r\n\r\n }, 1000);\r\n }, 1000);\r\n }\r\n}<\/pre>\n<p>The last required step is to list the components as\u00a0<em>entryComponents <\/em>either in your app.components.ts @Component({}) decorator or in the app.modules.ts:<\/p>\n<pre class=\"lang:default decode:true \" title=\"src\/app\/app.modules.ts\">import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule, ApplicationRef } from '@angular\/core';\r\nimport { CommonModule } from '@angular\/common';\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { ChildComponent } from '.\/child\/child.component';\r\nimport { AnotherChildComponent } from '.\/another-child\/another-child.component';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    ChildComponent,\r\n    AnotherChildComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    CommonModule,\r\n    FormsModule\r\n  ],\r\n  providers: [],\r\n  entryComponents: [AppComponent, ChildComponent, AnotherChildComponent],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>This should lead to the following result:<\/p>\n<p><a href=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/08\/ng2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-969\" src=\"http:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/08\/ng2.png\" alt=\"ng2\" width=\"351\" height=\"303\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2016\/08\/ng2.png 351w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2016\/08\/ng2-300x259.png 300w\" sizes=\"auto, (max-width: 351px) 100vw, 351px\" \/><\/a><\/p>\n<p>In a real world application you probably want to remove the dynamically rendered components at some point. In order to do so it is required to store the return of <code>this.parent.createComponent()\u00a0<\/code>in a variable. Lets add another setTimeout and remove the another child component after another 500 milliseconds.<\/p>\n<pre class=\"lang:js decode:true \" title=\"src\/app\/app.component.ts\">import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver} from '@angular\/core';\r\nimport {ChildComponent} from \".\/child\/child.component\";\r\nimport {AnotherChildComponent} from \".\/another-child\/another-child.component\";\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: 'app.component.html',\r\n  styleUrls: ['app.component.css']\r\n})\r\nexport class AppComponent {\r\n\r\n  title = 'app works!';\r\n\r\n  @ViewChild('parent', {read: ViewContainerRef})\r\n  parent: ViewContainerRef;\r\n\r\n  constructor(private componentFactoryResolver: ComponentFactoryResolver) {\r\n    const childComponent = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);\r\n    const anotherChildComponent = this.componentFactoryResolver.resolveComponentFactory(AnotherChildComponent)\r\n    let anotherChildComponentHolder;\r\n\r\n    setTimeout(()=&gt; {\r\n      \/\/ at this point we want the \"child\" component to be rendered into the app.component:\r\n      this.parent.createComponent(childComponent);\r\n\r\n      setTimeout(()=&gt; {\r\n        \/\/ at this point we want the \"another-child\" component to be rendered into the app.component:\r\n        anotherChildComponentHolder = this.parent.createComponent(anotherChildComponent);\r\n\r\n        setTimeout(()=&gt; anotherChildComponentHolder.destroy(), 500)\r\n      }, 1000);\r\n    }, 1000);\r\n  }\r\n}\r\n<\/pre>\n<p>Thats it! If you have any questions feel free to use the comment section.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my current project\u00a0I\u00a0came to a situation where it was necessary to drop\u00a0specific components into my view. Since the project is a game and the current view should not be tied to URLs at this point i decided not to use the router but to load my various components dynamically into my view. This gives [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/\"> READ MORE<\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,2,60],"tags":[],"class_list":["post-961","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript","category-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Dynamically Render Components with ComponentFactoryResolver in Angular 2 - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Empower Angular 2: Dynamic component rendering made easy Elevate flexibility, enhance UI, streamline development. Explore now for ultimate control!\" \/>\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.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dynamically Render Components with ComponentFactoryResolver in Angular 2 - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Empower Angular 2: Dynamic component rendering made easy Elevate flexibility, enhance UI, streamline development. Explore now for ultimate control!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-17T13:02:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-22T08:34:47+00:00\" \/>\n<meta name=\"author\" content=\"theCodeCampus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"theCodeCampus\" \/>\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.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Dynamically Render Components with ComponentFactoryResolver in Angular 2\",\"datePublished\":\"2016-08-17T13:02:57+00:00\",\"dateModified\":\"2025-04-22T08:34:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/\"},\"wordCount\":479,\"commentCount\":36,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/schulungen-tcc_sascha_WP_small.png\",\"articleSection\":[\"Angular\",\"JavaScript\",\"TypeScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/\",\"name\":\"Dynamically Render Components with ComponentFactoryResolver in Angular 2 - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/schulungen-tcc_sascha_WP_small.png\",\"datePublished\":\"2016-08-17T13:02:57+00:00\",\"dateModified\":\"2025-04-22T08:34:47+00:00\",\"description\":\"Empower Angular 2: Dynamic component rendering made easy Elevate flexibility, enhance UI, streamline development. Explore now for ultimate control!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/schulungen-tcc_sascha_WP_small.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/schulungen-tcc_sascha_WP_small.png\",\"width\":720,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-dynamically-render-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dynamically Render Components with ComponentFactoryResolver in Angular 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\",\"name\":\"theCodeCampus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"caption\":\"theCodeCampus\"},\"description\":\"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/thecodecampus\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dynamically Render Components with ComponentFactoryResolver in Angular 2 - Web Development Blog","description":"Empower Angular 2: Dynamic component rendering made easy Elevate flexibility, enhance UI, streamline development. Explore now for ultimate control!","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.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/","og_locale":"en_US","og_type":"article","og_title":"Dynamically Render Components with ComponentFactoryResolver in Angular 2 - Web Development Blog","og_description":"Empower Angular 2: Dynamic component rendering made easy Elevate flexibility, enhance UI, streamline development. Explore now for ultimate control!","og_url":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2016-08-17T13:02:57+00:00","article_modified_time":"2025-04-22T08:34:47+00:00","author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Written by":"theCodeCampus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Dynamically Render Components with ComponentFactoryResolver in Angular 2","datePublished":"2016-08-17T13:02:57+00:00","dateModified":"2025-04-22T08:34:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/"},"wordCount":479,"commentCount":36,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_small.png","articleSection":["Angular","JavaScript","TypeScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/","url":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/","name":"Dynamically Render Components with ComponentFactoryResolver in Angular 2 - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_small.png","datePublished":"2016-08-17T13:02:57+00:00","dateModified":"2025-04-22T08:34:47+00:00","description":"Empower Angular 2: Dynamic component rendering made easy Elevate flexibility, enhance UI, streamline development. Explore now for ultimate control!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_small.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_small.png","width":720,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-dynamically-render-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Dynamically Render Components with ComponentFactoryResolver in Angular 2"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc","name":"theCodeCampus","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","caption":"theCodeCampus"},"description":"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.","sameAs":["https:\/\/www.linkedin.com\/showcase\/thecodecampus\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=961"}],"version-history":[{"count":26,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/961\/revisions"}],"predecessor-version":[{"id":3439,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/961\/revisions\/3439"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}