{"id":2676,"date":"2023-05-08T18:12:01","date_gmt":"2023-05-08T16:12:01","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2676"},"modified":"2023-05-08T18:12:01","modified_gmt":"2023-05-08T16:12:01","slug":"dynamic-component-loader","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2023\/05\/08\/dynamic-component-loader\/","title":{"rendered":"Dynamic component loader"},"content":{"rendered":"\n

Component templates are not always fixed. An application might need to load new components at runtime.<\/p>\n\n\n\n

Angular comes with its own API for loading components dynamically.<\/p>\n\n\n\n

To dynamically load a component in Angular, we can Use the createComponent()<\/code> method of the ViewContainerRef<\/code> to create a component instance.<\/p>\n\n\n\n

The following example shows how to build a dynamic ad banner.<\/p>\n\n\n\n

The anchor directive<\/h4>\n\n\n\n

Before adding components, we have to define an anchor point to tell Angular where to insert components.<\/p>\n\n\n\n

The ad banner uses a helper directive called\u00a0AdDirective<\/code>\u00a0to mark valid insertion points in the template.<\/p>\n\n\n\n

import { Directive, ViewContainerRef } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[adHost]',\r\n})\r\nexport class AdDirective {\r\n  constructor(public viewContainerRef: ViewContainerRef) { }\r\n}<\/code><\/pre>\n\n\n\n
AdDirective<\/code> injects ViewContainerRef<\/a><\/code> to gain access to the view container of the element that will host the dynamically added component.<\/p>\n\n\n\n
In the\u00a0@Directive<\/a><\/code>\u00a0decorator, notice the selector name,\u00a0adHost<\/code>; that’s what we will use to apply the directive to the element. The next section shows us how.<\/p>\n\n\n\n
Loading components<\/h4>\n\n\n\n
The\u00a0<ng-template><\/a><\/code>\u00a0element is where we apply the directive we just made. To apply the\u00a0AdDirective<\/code>, recall the selector from\u00a0ad.directive.ts<\/code>,\u00a0[adHost]<\/code>. Apply that to\u00a0<ng-template><\/a><\/code>\u00a0without the square brackets. Now Angular knows where to dynamically load components.<\/p>\n\n\n\n
template: `\r\n  <div class=\"ad-banner-example\">\r\n    <h3>Advertisements<\/h3>\r\n    <ng-template adHost><\/ng-template>\r\n  <\/div>\r\n`<\/code><\/pre>\n\n\n\n
PS:<\/em><\/strong> The\u00a0<ng-template><\/a><\/code>\u00a0element is a good choice for dynamic components because it doesn’t render any additional output.<\/p>\n\n\n\n
Resolving components<\/h4>\n\n\n\n
export class AdBannerComponent implements OnInit, OnDestroy {\r\n\r\n  @ViewChild(AdDirective, {static: true}) adHost!: AdDirective;\r\n\r\r\n  ngOnInit(): void {\r\n    this.loadComponent(MyDynamicComponent);\r\r\n  }\r\n\r\n  loadComponent(component) {\r\n\n    const viewContainerRef = this.adHost.viewContainerRef;\r\n    viewContainerRef.clear();\r\n\r\n    const componentRef = viewContainerRef.createComponent(component);\n    \/\/we can also pass inputs to the component using the componentRef.instance property.\r\n    \/\/ for example : componentRef.instance.data = dataInputs;\r\n  }\r\n\r\r\n}<\/code><\/pre>\n\n\n\n
In this example, “MyDynamicComponent” is the component we want to load dynamically, and adHost<\/code> is a reference to our template where we want to load the component.<\/p>\n\n\n\n
we can call the loadComponent()<\/code> method with the component we want to load dynamically as an argument. For example:<\/p>\n\n\n\n
this.loadComponent(customComponent);\r<\/code><\/pre>\n\n\n\n
This will load the “customComponent<\/code>” component dynamically in the template<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Component templates are not always fixed. An application might need to load new components at runtime. Angular comes with its own API for loading components dynamically. To dynamically load a component in Angular, we can Use the createComponent() method of the ViewContainerRef to create a component instance. The following example shows how to build a […]<\/p>\n","protected":false},"author":1,"featured_media":2038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[292,685,34,684,330,682,683],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2676"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2676"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2676\/revisions"}],"predecessor-version":[{"id":2677,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2676\/revisions\/2677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/2038"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}