Compile template based on injected config

Question

Is there a way to dynamically create a template for a component based on a value of an injected Service?

Angular 2.0.0-beta.7

The scenario: I get a json containing nested components. I render these components (recursively) using DynamicComponentLoader. Here i inject custom Data to the components.

In this case i have something like a "Layout-Component" which gets a config containing the configuration for the layout (1 row - three column)

The code looks something like that:

    {
      "components": {
        "name": "Layout",
        "root": true,
        "params": {
          "cols": "3"
        },
        "children": [
          {
            "name": "Navigation",
            "position": "pos1",
            "children": [{...}]
          },
          {
            "name": "Content",
            "position": "pos2"
          },
          {
            "name": "Sidebar",
            "position": "pos3"
          }
        ]
      }
    }

    @Component({
      selector: 'df-layout',
      template: "<div>?</div>"
    })
    export class DfLayout {

      constructor(@Inject('layoutConfig') layoutConfig) {
        //layoutConfig ===> {cols: 3}

        let templateString = renderTemplate(layoutConfig);

        //TODO
        //compile templateString and replace template so that template variables (#pos1, ...) can be used

   /* 
    <div class="row">
      <div class="col-4" #pos1></div>
      <div class="col-4" #pos2></div>
      <div class="col-4" #pos3></div>
    </div>
    */

      }
    }

I know how to create the html based on the config. But I don't know how to "compile" it. Just passing it to [innerHTML] of the root div doesn't do the job because I need the local template variables for rendering childComponents using DynamicComponentLoader.loadIntoLocation(...)

Is there a way to compile a template-string and use it in the current template?

I have a [similar issue](http://stackoverflow.com/q/35685342/1876949), but no solution yet, I'm afraid. Since there's no `$compile` like in ng1, I was planning to look into [Renderer](https://github.com/angular/angular/blob/2.0.0-beta.7/modules/angular2/src/platform/dom/dom_renderer.ts), but not sure if it can be used for this... — Sasxa, Feb 29 '16 at 11:50

score 0 · Answer 1 · answered Feb 29 '16 at 13:44

0

Maybe you can create a @Component for each children you may have to insert in the DOM. Ex: NavigationComponent,ContentComponent,etc...

And then in the ngOnInit method:

Type type;
if(children.name === 'Navigation') {
 type = NavigationComponent;
}if(children.name === 'Content') {
 type = ContentComponent;
}
dynamicComponentLoader.loadIntoLocation(type,this.elementRef,'anyRef');

answered Feb 29 '16 at 13:44

Michael Desigaud

2,115
1
15
15

Maybe i wasn't clear enough - i need to somehow compile the "grid" i got from `renderTemplate ` because I'm not able to reference to `pos1` or in your case to `anyRef` - `error: Could not find variable anyRef` I will provide a plnkr or something like that asap :) – Dominik Strasser Feb 29 '16 at 14:22

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

I think that this question could interest you and particularly the alexpods's answer based on a fake component:

Equivalent of $compile in Angular 2

edited May 23 '17 at 11:54

Community

1
1

answered Feb 29 '16 at 14:14

Thierry Templier

198,364
44
396
360

I already stumbled upon this post. But it seemed more like a "hack" than a clean solution. :/ – Dominik Strasser Feb 29 '16 at 14:42

Compile template based on injected config

2 Answers2