How can I use create dynamic template to compile dynamic Component with Angular 2 0

Question

I want to dynamically create a template  This should be used to build a ComponentType at runtime and place  even replace  it somewhere inside of the hosting Component    Until RC4 I was using ComponentResolver  but with RC5 I get the following message   ComponentResolver is deprecated for dynamic compilation  Use ComponentFactoryResolver together with  NgModule  Component entryComponents or ANALYZE FOR ENTRY COMPONENTS provider instead  For runtime compile only  you can also use Compiler compileComponentSync Async    I found this document  Angular 2 Synchronous Dynamic Component Creation   And understand that I can use either   Kind of dynamic ngIf with ComponentFactoryResolver  If I pass known components inside of  Component  entryComponents   comp1  comp2         - I can use  resolveComponentFactory componentToRender   Real runtime compilation  with Compiler       But the question is how to use that Compiler  The note above says that I should call  Compiler compileComponentSync Async - so how    For example  I want to create  based on some configuration conditions  this kind of template for one kind of settings   lt form gt      lt string-editor       propertyName    code         entity   entity      gt  lt  string-editor gt      lt string-editor       propertyName    description         entity   entity      gt  lt  string-editor gt           and in another case this one  string-editor is replaced with text-editor    lt form gt      lt text-editor       propertyName    code         entity   entity      gt  lt  text-editor gt           And so on  different number date reference editors by property types  skipped some properties for some users      i e  this is an example  the real configuration could generate much more different and complex templates   The template is changing  so I cannot use ComponentFactoryResolver and pass existing ones    I need a solution with the Compiler

User · Answer

I have a simple example to show how to do angular 2 rc6 dynamic component.

Say, you have a dynamic html template = template1 and want to dynamic load, firstly wrap into component

@Component({template: template1})
class DynamicComponent {}

here template1 as html, may be contains ng2 component

From rc6, have to have @NgModule wrap this component. @NgModule, just like module in anglarJS 1, it decouple different part of ng2 application, so:

@Component({
  template: template1,

})
class DynamicComponent {

}
@NgModule({
  imports: [BrowserModule,RouterModule],
  declarations: [DynamicComponent]
})
class DynamicModule { }

(Here import RouterModule as in my example there is some route components in my html as you can see later on)

Now you can compile DynamicModule as: this.compiler.compileModuleAndAllComponentsAsync(DynamicModule).then( factory => factory.componentFactories.find(x => x.componentType === DynamicComponent))

And we need put above in app.moudule.ts to load it, please see my app.moudle.ts. For more and full details check: https://github.com/Longfld/DynamicalRouter/blob/master/app/MyRouterLink.ts and app.moudle.ts

and see demo: http://plnkr.co/edit/1fdAYP5PAbiHdJfTKgWo?p=preview

User · Answer

EDIT  26 08 2017   The solution below works well with Angular2 and 4  I ve updated it to contain a template variable and click handler and tested it with Angular 4 3  For Angular4  ngComponentOutlet as described in Ophir s answer is a much better solution  But right now it does not support inputs  amp  outputs yet  If  this PR  https   github com angular angular pull 15362  is accepted  it would be possible through the component instance returned by the create event  ng-dynamic-component may be the best and simplest solution altogether  but I haven t tested that yet    Long Field s answer is spot on  Here s another  synchronous  example     import  Compiler  Component  NgModule  OnInit  ViewChild    ViewContainerRef  from   angular core  import  BrowserModule  from   angular platform-browser    Component     selector   my-app     template    lt h1 gt Dynamic template  lt  h1 gt                lt div  container gt  lt  div gt      export class App implements OnInit      ViewChild  container     read  ViewContainerRef    container  ViewContainerRef     constructor private compiler  Compiler        ngOnInit         this addComponent          lt h4  click   increaseCounter    gt          Click to increase    counter          enter code here   lt  h4 gt                    counter  1          increaseCounter  function                this counter                                    private addComponent template  string  properties   any              Component  template       class TemplateComponent          NgModule  declarations   TemplateComponent        class TemplateModule         const mod   this compiler compileModuleAndAllComponentsSync TemplateModule       const factory   mod componentFactories find  comp    gt        comp componentType     TemplateComponent            const component   this container createComponent factory       Object assign component instance  properties          If properties are changed at a later stage  the change detection        may need to be triggered manually         component changeDetectorRef detectChanges            NgModule     imports    BrowserModule      declarations    App      bootstrap    App      export class AppModule      Live at http   plnkr co edit fdP9Oc

User · Answer

If all you need as a way to parse a dynamic string and load components by their selectors, you may also find the ngx-dynamic-hooks library useful. I initially created this as part of a personal project but didn't see anything like it around, so I polished it up a bit and made it public.

Some tidbids:

You can load any components into a dynamic string by their selector (or any other pattern of your choice!)
Inputs and outputs can be se just like in a normal template
Components can be nested without restrictions
You can pass live data from the parent component into the dynamically loaded components (and even use it to bind inputs/outputs)
You can control which components can load in each outlet and even which inputs/outputs you can give them
The library uses Angular's built-in DOMSanitizer to be safe to use even with potentially unsafe input.

Notably, it does not rely on a runtime-compiler like some of the other responses here. Because of that, you can't use template syntax. On the flipside, this means it works in both JiT and AoT-modes as well as both Ivy and the old template engine, as well as being much more secure to use in general.

See it in action in this Stackblitz.

User · Answer

For this particular case looks like using a directive to dynamically create the component would be a better option. Example:

In the HTML where you want to create the component

<ng-container dynamicComponentDirective [someConfig]="someConfig"></ng-container>

I would approach and design the directive in the following way.

const components: {[type: string]: Type<YourConfig>} = {
    text : TextEditorComponent,
    numeric: NumericComponent,
    string: StringEditorComponent,
    date: DateComponent,
    ........
    .........
};

@Directive({
    selector: '[dynamicComponentDirective]'
})
export class DynamicComponentDirective implements YourConfig, OnChanges, OnInit {
    @Input() yourConfig: Define your config here //;
    component: ComponentRef<YourConfig>;

    constructor(
        private resolver: ComponentFactoryResolver,
        private container: ViewContainerRef
    ) {}

    ngOnChanges() {
        if (this.component) {
            this.component.instance.config = this.config;
            // config is your config, what evermeta data you want to pass to the component created.
        }
    }

    ngOnInit() {
        if (!components[this.config.type]) {
            const supportedTypes = Object.keys(components).join(', ');
            console.error(`Trying to use an unsupported type ${this.config.type} Supported types: ${supportedTypes}`);
        }

        const component = this.resolver.resolveComponentFactory<yourConfig>(components[this.config.type]);
        this.component = this.container.createComponent(component);
        this.component.instance.config = this.config;
    }
}

So in your components text, string, date, whatever - whatever the config you have been passing in the HTML in the ng-container element would be available.

The config, yourConfig, can be the same and define your metadata.

Depending on your config or input type the directive should act accordingly and from the supported types, it would render the appropriate component. If not it will log an error.

User · Answer

I decided to compact everything I learned into one file  There s a lot to take in here especially compared to before RC5  Note that this source file includes the AppModule and AppComponent   import     Component  Input  ReflectiveInjector  ViewContainerRef  Compiler  NgModule  ModuleWithComponentFactories    OnInit  ViewChild   from   angular core   import  BrowserModule  from   angular platform-browser     Component     selector   app-dynamic     template    lt h4 gt Dynamic Components lt  h4 gt  lt br gt      export class DynamicComponentRenderer implements OnInit      factory  ModuleWithComponentFactories lt DynamicModule gt      constructor private vcRef  ViewContainerRef  private compiler  Compiler         ngOnInit         if   this factory          const dynamicComponents             sayName1   comp  SayNameComponent  inputs   name   Andrew Wiles             sayAge1   comp  SayAgeComponent  inputs   age  30            sayName2   comp  SayNameComponent  inputs   name   Richard Taylor             sayAge2   comp  SayAgeComponent  inputs   age  25           this compiler compileModuleAndAllComponentsAsync DynamicModule           then  moduleWithComponentFactories  ModuleWithComponentFactories lt DynamicModule gt     gt              this factory   moduleWithComponentFactories            Object keys dynamicComponents  forEach k   gt                this add dynamicComponents k                                          addNewName value  string        this add  comp  SayNameComponent  inputs   name  value           addNewAge value  number        this add  comp  SayAgeComponent  inputs   age  value           add comp  any        const compFactory   this factory componentFactories find x   gt  x componentType     comp comp          If we don t want to hold a reference to the component type  we can also say  const compFactory   this factory componentFactories find x   gt  x selector      my-component-selector        const injector   ReflectiveInjector fromResolvedProviders     this vcRef parentInjector       const cmpRef   this vcRef createComponent compFactory  this vcRef length  injector           Object keys comp inputs  forEach i   gt  cmpRef instance i    comp inputs i            Component     selector   app-age     template    lt div gt My age is   age    lt  div gt      class SayAgeComponent      Input   public age  number       Component     selector   app-name     template    lt div gt My name is   name    lt  div gt      class SayNameComponent      Input   public name  string       NgModule     imports   BrowserModule     declarations   SayAgeComponent  SayNameComponent     class DynamicModule      Component     selector   app-root     template             lt h3 gt   message   lt  h3 gt           lt app-dynamic  ad gt  lt  app-dynamic gt           lt br gt           lt input  name type  text  placeholder  name  gt           lt button  click   ad addNewName name value   gt Add Name lt  button gt           lt br gt           lt input  age type  number  placeholder  age  gt           lt button  click   ad addNewAge age value   gt Add Age lt  button gt            export class AppComponent     message    this is app component      ViewChild DynamicComponentRenderer  dcr       NgModule     imports   BrowserModule     declarations   AppComponent  DynamicComponentRenderer     bootstrap   AppComponent     export class AppModule

User · Answer

I must have arrived at the party late  none of the solutions here seemed helpful to me - too messy and felt like too much of a workaround   What I ended up doing is using Angular 4 0 0-beta 6 s ngComponentOutlet   This gave me the shortest  simplest solution all written in the dynamic component s file    Here is a simple example which just receives text and places it in a template  but obviously you can change according to your need    import     Component  OnInit  Input  NgModule  NgModuleFactory  Compiler   from   angular core     Component     selector   my-component     template    lt ng-container  ngComponentOutlet  dynamicComponent                              ngModuleFactory  dynamicModule   gt  lt  ng-container gt      styleUrls    my component css      export class MyComponent implements OnInit     dynamicComponent    dynamicModule  NgModuleFactory lt any gt       Input     text  string     constructor private compiler  Compiler           ngOnInit         this dynamicComponent   this createNewComponent this text       this dynamicModule   this compiler compileModuleSync this createComponentModule this dynamicComponent           protected createComponentModule  componentType  any         NgModule         imports            declarations            componentType                entryComponents   componentType             class RuntimeComponentModule                    a module for just this Type     return RuntimeComponentModule         protected createNewComponent  text string        let template    dynamically created template with text    text          Component         selector   dynamic-component         template  template            class DynamicComponent implements OnInit         text  any          ngOnInit            this text   text                     return DynamicComponent           Short explanation    my-component - the component in which a dynamic component is rendering DynamicComponent - the component to be dynamically built and it is rendering inside my-component    Don t forget to upgrade all the angular libraries to  Angular 4 0 0  Hope this helps  good luck   UPDATE  Also works for angular 5

User · Answer

Following up on Radmin s excellent answer  there is a little tweak needed for everyone who is using angular-cli version 1 0 0-beta 22 and above   COMPILER PROVIDERScan no longer be imported  for details see angular-cli GitHub    So the workaround there is to not use COMPILER PROVIDERS and JitCompiler in the providers section at all  but use JitCompilerFactory from   angular compiler  instead like this inside the type builder class   private compiler  Compiler   new JitCompilerFactory   useDebug  false  useJit  true    createCompiler      As you can see  it is not injectable and thus has no dependencies with the DI  This solution should also work for projects not using angular-cli

User · Answer

EDIT - related to 2 3 0  2016-12-07   NOTE  to get solution for previous version  check the history of this post  Similar topic is discussed here Equivalent of  compile in Angular 2  We need to use JitCompiler and NgModule  Read more about NgModule in Angular2 here   Angular 2 RC5 - NgModules  Lazy Loading and AoT compilation  In a Nutshell There is a working plunker example  dynamic template  dynamic component type  dynamic module JitCompiler      in action  The principal is  1  create Template 2  find ComponentFactory in cache - go to 7  3  - create Component 4  - create Module 5  - compile Module 6  - return  and cache for later use  ComponentFactory 7  use Target and ComponentFactory to create an Instance of dynamic Component Here is a code snippet  more of it here  - Our custom Builder is returning just built cached ComponentFactory and the view Target placeholder consume to create an instance of the DynamicComponent      here we get a TEMPLATE with dynamic content     TODO   var template   this templateBuilder prepareTemplate this entity  useTextarea         here we get Factory  just compiled or from cache    this typeBuilder        createComponentFactory template         then  factory  ComponentFactory lt IHaveDynamicData gt     gt                   Target will instantiate and inject component  we ll keep reference to it          this componentRef   this              dynamicComponentTarget              createComponent factory               let s inject  Inputs to component instance         let component   this componentRef instance           component entity   this entity                         This is it - in nutshell it  To get more details   read below   TL amp DR Observe a plunker and come back to read details in case some snippet requires more explanation   Detailed explanation - Angular2 RC6    amp  runtime components Below description of this scenario  we will  create a module PartsModule NgModule  holder of small pieces  create another module DynamicModule NgModule  which will contain our dynamic component  and reference PartsModule dynamically  create dynamic Template  simple approach  create new Component type  only if template has changed  create new RuntimeModule NgModule  This module will contain the previously created Component type call JitCompiler compileModuleAndAllComponentsAsync runtimeModule  to get ComponentFactory create an Instance of the DynamicComponent - job of the View Target placeholder and ComponentFactory assign  Inputs to new instance  switch from INPUT to TEXTAREA editing   consume  Outputs  NgModule We need an NgModules   While I would like to show a very simple example  in this case  I would need three modules  in fact 4 - but I do not count the AppModule   Please  take this rather than a simple snippet as a basis for a really solid dynamic component generator   There will be one module for all small components  e g  string-editor  text-editor  date-editor  number-editor      NgModule     imports                CommonModule        FormsModule        declarations          DYNAMIC DIRECTIVES        exports          DYNAMIC DIRECTIVES        CommonModule        FormsModule        export class PartsModule       Where DYNAMIC DIRECTIVES are extensible and are intended to hold all small parts used for our dynamic Component template type  Check app parts parts module ts  The second will be module for our Dynamic stuff handling  It will contain hosting components and some providers   which will be singletons  Therefor we will publish them standard way - with forRoot   import   DynamicDetail            from    detail view   import   DynamicTypeBuilder       from    type builder   import   DynamicTemplateBuilder   from    template builder     NgModule     imports         PartsModule      declarations    DynamicDetail      exports         DynamicDetail       export class DynamicModule        static forRoot                 return               ngModule  DynamicModule              providers       singletons accross the whole app               DynamicTemplateBuilder                DynamicTypeBuilder                                      Check the usage of the forRoot   in the AppModule  Finally  we will need an adhoc  runtime module   but that will be created later  as a part of DynamicTypeBuilder job  The forth module  application module  is the one who keeps declares compiler providers      import   COMPILER PROVIDERS   from   angular compiler       import   AppComponent     from    app component   import   DynamicModule      from    dynamic dynamic module     NgModule     imports              BrowserModule      DynamicModule forRoot      singletons        declarations    AppComponent     providers        COMPILER PROVIDERS    this is an app singleton declaration       Read  do read  much more about NgModule there   Angular 2 RC5 - NgModules  Lazy Loading and AoT compilation Angular Modules documentation  A template builder In our example we will process detail of this kind of entity entity          code   quot ABC123 quot       description   quot A description of this Entity quot       To create a template  in this plunker we use this simple naive builder   The real solution  a real template builder  is the place where your application can do a lot     plunker - app dynamic template builder ts import  Injectable  from  quot  angular core quot     Injectable   export class DynamicTemplateBuilder        public prepareTemplate entity  any  useTextarea  boolean                let properties   Object keys entity         let template    quot  lt form  gt  quot         let editorName   useTextarea             quot text-editor quot             quot string-editor quot                  properties forEach  propertyName    gt           template                 lt   editorName                 propertyName   quot    propertyName   quot                 entity   quot entity quot             gt  lt    editorName  gt                       return template    quot  lt  form gt  quot            A trick here is - it builds a template which uses some set of known properties  e g  entity  Such property -ies  must be part of dynamic component  which we will create next  To make it a bit more easier  we can use an interface to define properties  which our Template builder can use  This will be implemented by our dynamic Component type  export interface IHaveDynamicData        public entity  any             A ComponentFactory builder Very important thing here is to keep in mind   our component type  build with our DynamicTypeBuilder  could differ - but only by its template  created above   Components  properties  inputs  outputs or some protected  are still same  If we need different properties  we should define different combination of Template and Type Builder  So  we are touching the core of our solution  The Builder  will 1  create ComponentType 2  create its NgModule 3  compile ComponentFactory 4  cache it for later reuse  An dependency we need to receive     plunker - app dynamic type builder ts import   JitCompiler   from   angular compiler         Injectable   export class DynamicTypeBuilder         wee need Dynamic component builder   constructor      protected compiler  JitCompiler         And here is a snippet how to get a ComponentFactory     plunker - app dynamic type builder ts    this object is singleton - so we can use this as a cache private  cacheOfFactories         templateKey  string   ComponentFactory lt IHaveDynamicData gt            public createComponentFactory template  string        Promise lt ComponentFactory lt IHaveDynamicData gt  gt            let factory   this  cacheOfFactories template        if  factory            console log  quot Module and Type are returned from cache quot                   return new Promise  resolve    gt                resolve factory                                 unknown template     let s create a Type for it     let type     this createNewComponent template       let module   this createComponentModule type            return new Promise  resolve    gt            this compiler              compileModuleAndAllComponentsAsync module               then  moduleWithFactories    gt                                factory     find moduleWithFactories componentFactories                                     componentType  type                      this  cacheOfFactories template    factory                   resolve factory                               Above we create and cache both Component and Module  Because if the template  in fact the real dynamic part of that all  is the same   we can reuse  And here are two methods  which represent the really cool way how to create a decorated classes types in runtime  Not only  Component but also the  NgModule protected createNewComponent  tmpl string       Component         selector   dynamic-component         template  tmpl         class CustomDynamicComponent  implements IHaveDynamicData          Input    public entity  any            a component for this particular template   return CustomDynamicComponent    protected createComponentModule  componentType  any       NgModule       imports          PartsModule     there are  text-editor    string-editor                declarations          componentType               class RuntimeComponentModule              a module for just this Type   return RuntimeComponentModule     Important   our component dynamic types differ  but just by template  So we use that fact to cache them  This is really very important  Angular2 will also cache these   by the type  And if we would recreate for the same template strings new types    we will start to generate memory leaks   ComponentFactory used by hosting component Final piece is a component  which hosts the target for our dynamic component  e g   lt div  dynamicContentPlaceHolder gt  lt  div gt   We get a reference to it and use ComponentFactory to create a component  That is in a nutshell  and here are all the pieces of that component  if needed  open plunker here  Let s firstly summarize import statements  import  Component  ComponentRef ViewChild ViewContainerRef    from   angular core   import  AfterViewInit OnInit OnDestroy OnChanges SimpleChange  from   angular core    import   IHaveDynamicData  DynamicTypeBuilder   from    type builder   import   DynamicTemplateBuilder                 from    template builder     Component     selector   dynamic-detail     template     lt div gt    check uncheck to use INPUT vs TEXTAREA     lt input type  quot checkbox quot   val  click   quot refreshContent val checked  quot    gt  lt hr   gt     lt div  dynamicContentPlaceHolder gt  lt  div gt    lt hr   gt    entity   lt pre gt   entity   json   lt  pre gt   lt  div gt        export class DynamicDetail implements AfterViewInit  OnChanges  OnDestroy  OnInit           wee need Dynamic component builder     constructor          protected typeBuilder  DynamicTypeBuilder          protected templateBuilder  DynamicTemplateBuilder                   We just receive  template and component builders  Next are properties which are needed for our example  more in comments     reference for a  lt div gt  with  dynamicContentPlaceHolder  ViewChild  dynamicContentPlaceHolder    read  ViewContainerRef    protected dynamicComponentTarget  ViewContainerRef     this will be reference to dynamic content - to be able to destroy it protected componentRef  ComponentRef lt IHaveDynamicData gt       until ngAfterViewInit  we cannot start  firstly  to process dynamic stuff protected wasViewInitialized   false      example entity     to be recieved from other app parts    this is kind of candiate for  Input protected entity          code   quot ABC123 quot       description   quot A description of this Entity quot         In this simple scenario  our hosting component does not have any  Input  So it does not have to react to changes  But despite of that fact  and to be ready for coming changes  - we need to introduce some flag if the component was already  firstly  initiated  And only then we can start the magic  Finally we will use our component builder  and its just compiled cached ComponentFacotry  Our Target placeholder will be asked to instantiate the Component with that factory  protected refreshContent useTextarea  boolean   false        if  this componentRef          this componentRef destroy                here we get a TEMPLATE with dynamic content     TODO   var template   this templateBuilder prepareTemplate this entity  useTextarea         here we get Factory  just compiled or from cache    this typeBuilder        createComponentFactory template         then  factory  ComponentFactory lt IHaveDynamicData gt     gt                   Target will instantiate and inject component  we ll keep reference to it          this componentRef   this              dynamicComponentTarget              createComponent factory               let s inject  Inputs to component instance         let component   this componentRef instance           component entity   this entity                           small extension Also  we need to keep a reference to compiled template   to be able properly destroy   it  whenever we will change it     this is the best moment where to start to process dynamic stuff public ngAfterViewInit    void       this wasViewInitialized   true      this refreshContent         wasViewInitialized is an IMPORTANT switch     when this component would have its own changing  Input      - then we have to wait till view is intialized - first OnChange is too soon public ngOnChanges changes    key  string   SimpleChange    void       if  this wasViewInitialized            return            this refreshContent       public ngOnDestroy      if  this componentRef          this componentRef destroy          this componentRef   null         done That is pretty much it  Do not forget to Destroy anything what was built dynamically  ngOnDestroy   Also  be sure to cache dynamic types and modules if the only difference is their template  Check it all in action here  to see previous versions  e g  RC5 related  of this post  check the history

User · Answer

I want to add a few details on top of this very excellent post by Radim.

I took this solution and worked on it for a bit and quickly ran into some limitations. I'll just outline those and then give the solution to that as well.

First of all I was unable to render dynamic-detail inside a dynamic-detail (basically nest dynamic UIs inside each other).
The next issue was that I wanted to render a dynamic-detail inside one of the parts that was made available in the solution. That was not possible with the initial solution either.
Lastly it was not possible to use template URLs on the dynamic parts like string-editor.

I made another question based on this post, on how to achieve these limitations, which can be found here:

recursive dynamic template compilation in angular2

I’ll just outline the answers to these limitations, should you run into the same issue as I, as that make the solution quite more flexible. It would be awesome to have the initial plunker updated with that as well.

To enable nesting dynamic-detail inside each other, You'll need to add DynamicModule.forRoot() in the import statement in the type.builder.ts

protected createComponentModule (componentType: any) {
    @NgModule({
    imports: [
        PartsModule, 
        DynamicModule.forRoot() //this line here
    ],
    declarations: [
        componentType
    ],
    })
    class RuntimeComponentModule
    {
    }
    // a module for just this Type
    return RuntimeComponentModule;
}

Besides that it was not possible to use <dynamic-detail> inside one of the parts being string-editor or text-editor.

To enable that you'll need to change parts.module.ts and dynamic.module.ts

Inside parts.module.ts You'll need to add DynamicDetail in the DYNAMIC_DIRECTIVES

export const DYNAMIC_DIRECTIVES = [
   forwardRef(() => StringEditor),
   forwardRef(() => TextEditor),
   DynamicDetail
];

Also in the dynamic.module.ts you'd have to remove the dynamicDetail as they are now part of the parts

@NgModule({
   imports:      [ PartsModule ],
   exports:      [ PartsModule],
})

A working modified plunker can be found here: http://plnkr.co/edit/UYnQHF?p=preview (I didn’t solve this issue, I’m just the messenger :-D)

Finally it was not possible to use templateurls in the parts created on the dynamic components. A solution (or workaround. I’m not sure whether it’s an angular bug or wrong use of the framework) was to create a compiler in the constructor instead of injecting it.

    private _compiler;

    constructor(protected compiler: RuntimeCompiler) {
        const compilerFactory : CompilerFactory =
        platformBrowserDynamic().injector.get(CompilerFactory);
        this._compiler = compilerFactory.createCompiler([]);
    }

Then use the _compiler to compile, then templateUrls are enabled as well.

return new Promise((resolve) => {
        this._compiler
            .compileModuleAndAllComponentsAsync(module)
            .then((moduleWithFactories) =>
            {
                let _ = window["_"];
                factory = _.find(moduleWithFactories.componentFactories, { componentType: type });

                this._cacheOfFactories[template] = factory;

                resolve(factory);
            });
    });

Hope this helps someone else!

Best regards Morten

User · Answer

Solved this in Angular 2 Final version simply by using the dynamicComponent directive from ng-dynamic.

Usage:

<div *dynamicComponent="template; context: {text: text};"></div>

Where template is your dynamic template and context can be set to any dynamic datamodel that you want your template to bind to.

User · Answer

I myself am trying to see how can I update RC4 to RC5 and thus I stumbled upon this entry and new approach to dynamic component creation still holds a bit of mystery to me, so I wont suggest anything on component factory resolver.

But, what I can suggest is a bit clearer approach to component creation on this scenario - just use switch in template that would create string editor or text editor according to some condition, like this:

<form [ngSwitch]="useTextarea">
    <string-editor *ngSwitchCase="false" propertyName="'code'" 
                 [entity]="entity"></string-editor>
    <text-editor *ngSwitchCase="true" propertyName="'code'" 
                 [entity]="entity"></text-editor>
</form>

And by the way, "[" in [prop] expression have a meaning, this indicates one way data binding, hence you can and even should omit those in case if you know that you do not need to bind property to variable.

User · Answer

Building on top of the answer by Ophir Stern, here is a variant which works with AoT in Angular 4. The only issue I have is I cant inject any services into the DynamicComponent, but I can live with that.

note: I haven't tested with Angular 5.

import { Component, OnInit, Input, NgModule, NgModuleFactory, Compiler, EventEmitter, Output } from '@angular/core';
import { JitCompilerFactory } from '@angular/compiler';

export function createJitCompiler() {
  return new JitCompilerFactory([{
    useDebug: false,
    useJit: true
  }]).createCompiler();
}

type Bindings = {
  [key: string]: any;
};

@Component({
  selector: 'app-compile',
  template: `
    <div *ngIf="dynamicComponent && dynamicModule">
      <ng-container *ngComponentOutlet="dynamicComponent; ngModuleFactory: dynamicModule;">
      </ng-container>
    </div>
  `,
  styleUrls: ['./compile.component.scss'],
  providers: [{provide: Compiler, useFactory: createJitCompiler}]
})
export class CompileComponent implements OnInit {

  public dynamicComponent: any;
  public dynamicModule: NgModuleFactory<any>;

  @Input()
  public bindings: Bindings = {};
  @Input()
  public template: string = '';

  constructor(private compiler: Compiler) { }

  public ngOnInit() {

    try {
      this.loadDynamicContent();
    } catch (err) {
      console.log('Error during template parsing: ', err);
    }

  }

  private loadDynamicContent(): void {

    this.dynamicComponent = this.createNewComponent(this.template, this.bindings);
    this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));

  }

  private createComponentModule(componentType: any): any {

    const runtimeComponentModule = NgModule({
      imports: [],
      declarations: [
        componentType
      ],
      entryComponents: [componentType]
    })(class RuntimeComponentModule { });

    return runtimeComponentModule;

  }

  private createNewComponent(template: string, bindings: Bindings): any {

    const dynamicComponent = Component({
      selector: 'app-dynamic-component',
      template: template
    })(class DynamicComponent implements OnInit {

      public bindings: Bindings;

      constructor() { }

      public ngOnInit() {
        this.bindings = bindings;
      }

    });

    return dynamicComponent;

  }

}

Hope this helps.

Cheers!

User · Answer

This is the example of dynamic Form controls generated from server.

https://stackblitz.com/edit/angular-t3mmg6

This example is dynamic Form controls is in add component (This is where you can get the Formcontrols from the server). If you see addcomponent method you can see the Forms Controls. In this example I am not using angular material,but It works (I am using @ work). This is target to angular 6, but works in all previous version.

Need to add JITComplierFactory for AngularVersion 5 and above.

Thanks

Vijay

User · Answer

In angular 7 x I used angular-elements for this    Install  angular-elements  npm i  angular elements -s Create accessory service    import   Injectable  Injector   from   angular core   import   createCustomElement   from   angular elements   import   IStringAnyMap   from  src app core models   import   AppUserIconComponent   from  src app shared    const COMPONENTS        user-icon   AppUserIconComponent      Injectable     providedIn   root     export class DynamicComponentsService     constructor private injector  Injector            public register    void       Object entries COMPONENTS  forEach   key  component    string  any     gt          const CustomElement   createCustomElement component    injector  this injector           customElements define key  CustomElement                  public create tagName  string  data  IStringAnyMap        HTMLElement       const customEl   document createElement tagName        Object entries data  forEach   key  value    string  any     gt          customEl key    value               return customEl           Note that you custom element tag must be different with angular component selector  in AppUserIconComponent       selector  app-user-icon       and in this case custom tag name I used  user-icon      Then you must call register in AppComponent     Component     selector   app-root     template    lt router-outlet gt  lt  router-outlet gt      export class AppComponent     constructor         dynamicComponents  DynamicComponentsService            dynamicComponents register              And now in any place of your code you can use it like this    dynamicComponents create  user-icon    user            or like this   const html     lt div class  wrapper  gt  lt user-icon class  user-icon  user    JSON stringify rec user    gt  lt  user-icon gt  lt  div gt     this content   this domSanitizer bypassSecurityTrustHtml html      in template     lt div class  comment-item d-flex   innerHTML   content  gt  lt  div gt    Note that in second case you must pass objects with JSON stringify and after that parse it again  I can t find better solution

User · Answer

2019 June answer  Great news  It seems that the  angular cdk package now has first-class support for portals   As of the time of writing  I didn t find the above official docs particularly helpful  particularly with regard to sending data into and receiving events from the dynamic components   In summary  you will need to   Step 1  Update your AppModule   Import PortalModule from the  angular cdk portal package and register your dynamic component s  inside entryComponents   NgModule     declarations         AppComponent  MyDynamicComponent          imports              PortalModule           entryComponents         MyDynamicComponent           export class AppModule       Step 2  Option A  If you do NOT need to pass data into and receive events from your dynamic components    Component     selector   my-app     template         lt button  click   onClickAddChild    gt Click to add child component lt  button gt       lt ng-template  cdkPortalOutlet   myPortal  gt  lt  ng-template gt         export class AppComponent      myPortal  ComponentPortal lt any gt     onClickAddChild         this myPortal   new ComponentPortal MyDynamicComponent           Component     selector   app-child     template    lt p gt I am a child  lt  p gt      export class MyDynamicComponent      See it in action  Step 2  Option B  If you DO need to pass data into and receive events from your dynamic components      A bit of boilerplate here  Recommend putting this function in a utils     file in order to keep your component code a little cleaner  function createDomPortalHost elRef  ElementRef  injector  Injector      return new DomPortalHost      elRef nativeElement      injector get ComponentFactoryResolver       injector get ApplicationRef       injector          Component     selector   my-app     template         lt button  click   onClickAddChild    gt Click to add random child component lt  button gt       lt div  portalHost gt  lt  div gt         export class AppComponent      portalHost  DomPortalHost     ViewChild  portalHost   elRef  ElementRef     constructor readonly injector  Injector           ngOnInit         this portalHost   createDomPortalHost this elRef  this injector          onClickAddChild         const myPortal   new ComponentPortal MyDynamicComponent       const componentRef   this portalHost attach myPortal       setTimeout      gt  componentRef instance myInput            gt  This is data passed from AppComponent  lt    1000              if we had an output called  myOutput  in a child component          this is how we would receive events           this componentRef instance myOutput subscribe      gt                Component     selector   app-child     template    lt p gt I am a child   lt strong gt   myInput   lt  strong gt  lt  p gt      export class MyDynamicComponent      Input   myInput           See it in action

[angular] How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

The answer is

Examples related to angular

Examples related to typescript

Examples related to compilation

Examples related to angular2-compiler

Tags