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 name
s from the browser for debugging?