Angular 2 dynamic `template variable name`s for DynamicComponentLoader?

Question

TL;DR:

Explanation:

I'm dynamically creating Angular 2 components using DynamicComponentLoader's loadIntoLocation() function.

The place to insert the component generated by this function is determined by its anchorName parameter, which excepts you to pass a Template Variable Name (as a string).

So in the example they use <div #child></div> in the template, then pass 'child'. Which works fine.

However, rather than having to link generated components to an element with variable name hard-coded into the template, I'd like to be able to, say, append them to a variable-sized list.

Now, the NgFor page shows you have access to an index variable: <li *ng-for="#item of items; #i = index">...</li>. So it'd work if I could assign the list items such template variable names used on this index or the like, i.e. #child1, #child2, etc.

So I'm inclined to try <div #{{foo}}></div> with an app variable foo as "child". I'm having trouble debugging this since the front-end doesn't really show these template variable names in the DOM, but it seems this dynamic assignment is failing, resulting in an error "Could not find variable ...".

Might there be any way to do what I want? Or even to view assigned template variable names from the browser for debugging?

both links above lead to the same not working example plunker — Guenter Guckelsberger

Eric Martinez Eric Martinez · Accepted Answer · 2015-11-29T12:39:23

The problem with that approach is you can't dynamically generate variable names.

Another possible approach is using loadAsRoot which instead of using a variable name, uses an id which can contain a dynamic name.

// This will generate dynamically the id value
template: `
  <div *ng-for="#idx of data">
    <div id="dynamicid_{{idx}}">Dynamic</div>
  </div>`

Then you set the list you want to iterate over

this.data = [1,2,3,4,5,6];

for(var i = 0; i < this.data.length; i++) {
  // Third argument is the injector that I'm not using, so I just nulled it
  dynamicComponentLoader.loadAsRoot(DynamicComponent, '#dynamicid_'+this.data[i], null);
}

Here's the plnkr with an example working.

I hope it helps.

Angular 2 dynamic `template variable name`s for DynamicComponentLoader?

2 Answers