recursive dynamic template compilation in angular2

Question

I've based some of my work on the same problem described in here:

dynamic template to compile dynamic Component with Angular 2.0

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

The working plunker described in the question above can be found here.

The problem occours if the dynamic-detail tries to create another dynamic view that uses dynamic-detail in the template. If i try to do that i get the following exception.:

'dynamic-detail' is not a known element: 1. If 'dynamic-detail' is an Angular component, then verify that it is part of this module.

This is easily reprocuded by changing the logic in the plunker to create a dynamic template that outputs "<dynamic-detail></dynamic-detail>".

In the file "app/dynamic/template.builder.ts" I've changed the following code:

      let editorName = useTextarea 
    ? "text-editor"
    : "string-editor";

To

      let editorName = useTextarea 
    ? "dynamic-detail"
    : "string-editor";

When that happens i run into the exception above. Apparently the compiler is not familiar with dynamic-detail when it is done recursively.

I've tried to add the DynamicDetail to imports in the different modules without any luck. Maybe that's not part of the solution.

Mirepoix

Answer 1

If your change "text-editor" to "dynamic-detail" then your template will look like:

<form>
  <dynamic-detail
     [propertyName]="'code'"
     [entity]="entity"
   ></dynamic-detail>
   <dynamic-detail
      [propertyName]="'description'"
      [entity]="entity"
   ></dynamic-detail>
</form>

DynamicDetail component doesn't have propertyName and entity properties. So you can add their.

detail.view.ts

export class DynamicDetail implements AfterViewInit, OnChanges, OnDestroy, OnInit
{ 
    @Input()  public propertyName: string;
    @Input()  public entity: any;

Second part of solution is add this component to RuntimeComponentModule:

type.builder.ts

protected createComponentModule (componentType: any) {
  @NgModule({
    imports: [ 
      PartsModule,
      DynamicModule.forRoot() // this line
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule {}

  return RuntimeComponentModule;
}

After that it should work Plunker Example

Mandrake

Thank you! That actually worked nicely! However the next propblem quickly came by. Now i want to render a dynamic-detail in one of the parts. Then i get the same error as before. If i do DynamicDetail as forwardRef in the parts.module i'll get a stack overflow exception. If I import DynamicModule.forRoot() in the partsModule i get an 'undefined exception' ... How can i have any of my parts render a dynamic-detail as well? – Mirepoix

plnkr.co/edit/UYnQHF?p=preview Look at parts.module.ts and dynamic.module.ts But if you will set the same template in dynamic component you will get circular invokation – Mandrake