{"id":743,"date":"2018-02-03T03:05:00","date_gmt":"2018-02-03T03:05:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=743"},"modified":"2025-02-19T13:41:59","modified_gmt":"2025-02-19T13:41:59","slug":"dynamically-create-a-component-in-angular","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/dynamically-create-a-component-in-angular","title":{"rendered":"How To Dynamically Create a Component in Angular"},"content":{"rendered":"\n

Let us assume that, we have a component as listed below, which we will load dynamically.<\/p>\n\n\n\n

import\u00a0{\u00a0Component,\u00a0Input\u00a0}\u00a0from\u00a0'@angular\/core';\n \n@Component({\n\u00a0\u00a0\u00a0\u00a0selector:\u00a0'app-message',\n\u00a0\u00a0\u00a0\u00a0template:\u00a0`<h2>{{message}}<\/h2>\n`\n})\nexport\u00a0class\u00a0MessageComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0@Input()\u00a0message:\u00a0string;\n}<\/pre>\n\n\n\n
To load MessageComponent dynamically you need a container. Let us say that we want to load MessageComponent inside AppComponent. We need a container element in the AppComponent.<\/p>\n\n\n\n
Template of AppComponent is as below:<\/p>\n\n\n\n
<div\u00a0style=\"text-align:center\">\n\u00a0\u00a0\u00a0\u00a0\u00a0<h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Welcome\u00a0to\u00a0{{\u00a0title\u00a0}}!\n\u00a0\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0<template\u00a0#messagecontainer>\n\u00a0\u00a0\u00a0\u00a0\u00a0<\/template>\n\u00a0<\/div><\/pre>\n\n\n\n
As you see that, we have an entry point template or a container template in which we will load MessageComponent dynamically.<\/p>\n\n\n\n
In the AppComponent, we need to import following:<\/p>\n\n\n\n
    \n
  1. ViewChild, ViewContainerRef, and ComponentFactoryResolver from @angular\/core<\/li>\n\n\n\n
  2. ComponentRef and ComponentFactory from @angular\/core<\/li>\n\n\n\n
  3. MessageComponent from message.component<\/li>\n<\/ol>\n\n\n\n
    After importing required things, AppComponnet will look like following listing:<\/p>\n\n\n\n
    import\u00a0{\n\u00a0\u00a0\u00a0\u00a0Component,\n\u00a0\u00a0\u00a0\u00a0ViewChild,\n\u00a0\u00a0\u00a0\u00a0ViewContainerRef,\n\u00a0\u00a0\u00a0\u00a0ComponentFactoryResolver,\n\u00a0\u00a0\u00a0\u00a0ComponentRef,\n\u00a0\u00a0\u00a0\u00a0ComponentFactory\n}\u00a0from\u00a0'@angular\/core';\nimport\u00a0{\u00a0MessageComponent\u00a0}\u00a0from\u00a0'.\/message.component';\n \n@Component({\n\u00a0\u00a0\u00a0\u00a0selector:\u00a0'app-root',\n\u00a0\u00a0\u00a0\u00a0templateUrl:\u00a0'.\/app.component.html'\n})\nexport\u00a0class\u00a0AppComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0title\u00a0=\u00a0'app';\n}<\/pre>\n\n\n\n
    We can access template as the ViewChild inside the Component class. Template is a container in which, we want to load the component dynamically. Therefore, we have to access temple as ViewConatinerRef<\/strong>.<\/p>\n\n\n\n
    ViewContainerRef<\/strong> represents container where one or more view can be attached. This can contain two types of views.<\/p>\n\n\n\n
      \n
    1. Host Views<\/li>\n\n\n\n
    2. Embedded Views<\/li>\n<\/ol>\n\n\n\n
       Host Views are created by instantiating a component using createComponent and Embedded Views are created by instantiating an Embedded Template using createEmbeddedView. We will use Host Views to dynamically load MessageComponent.<\/p>\n\n\n\n
      Let us create a variable called entry which will refer template element. In addition, we have injected ComponentFactoryResolver<\/strong> services to component class, which will be needed to dynamically load the component.<\/p>\n\n\n\n
      export\u00a0class\u00a0AppComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0title\u00a0=\u00a0'app';\n\u00a0\u00a0\u00a0\u00a0@ViewChild('messagecontainer',\u00a0{\u00a0read:\u00a0ViewContainerRef\u00a0})\u00a0entry:\u00a0ViewContainerRef;\n\u00a0\u00a0\u00a0\u00a0constructor(private\u00a0resolver:\u00a0ComponentFactoryResolver)\u00a0{\u00a0}\n}<\/pre>\n\n\n\n
      Keep in mind that entry variable which is reference of template element has API to create components, destroy components etc.<\/p>\n\n\n\n
      Now to create component, let us create a function. Inside the function, we need to perform following tasks,<\/p>\n\n\n\n