1

I haven't found a solution for this yet even looking at SO questions and answers.

I'm trying to build an Angular 2+ (I'm using updated Angular 4.x in particular) "container" component, accepting "child" components, and "2-way" binding data/events to them.

Basically I'm trying to do something like this HTML template, but I don't know (coming from Angular 1.x) the Angular 2+ way of writing the js/ts code of the component:

<!-- example "pseudo-html-template" use of "MyContainerComponent" and "MyChildComponent"s -->
<my-container-component>
    <my-child-component name="Child 1">
        Hello example 1 <code>HTML</code>!
    </my-child-component>
    <my-child-component name="Child 2">
        Hello example 2 <strong>HTML</strong>!
    </my-child-component>
    <my-child-component name="Child 3">
        Hello example 3 <i>HTML</i>!
    </my-child-component>
</my-container-component>

<!-- example "pseudo-html-template" of "MyContainerComponent" -->
<ul>
    <li *ngFor="/* [for any child in children] */">
        <!-- [the child <my-child-component> with "2-way" data/event binding i.e. <my-child-component [selected]="children[$index].selected" [name]="child.name"> ...] -->
    </li>
</ul>

For now I had to put everything inside the containter component and write the bindings with explicit indexes like <-- [...] --><my-child-component [selected]="children[3].selected" name="Child 3"><-- [...] -->

I basically need two things: access to the "ViewChildren" components inside the container component, show them with their inner HTML (and possibly retain their state/functionality as well?), and a way to dynamically add bindings to them on load from the container component code. If possible I'd like to achieve this with a similar template HTML code (ie. in my-app.component.html), instead of specifying the children html in the js/ts code of components

I have no clue where and how to look for solutions and documentation.

Zorgatone
  • 4,176
  • 4
  • 30
  • 47
  • 1
    There is no such thing than adding/removing bindings dynamically in Angular. They have to be added statically to a components template, or they won't do anything. One workaround is to create components at runtime (search for `[angular] $compile`) or use a shared service (no idea if this would work for your use case) – Günter Zöchbauer Sep 18 '17 at 10:26
  • @GünterZöchbauer basically I want to group similar components inside a single container, and have it add bindings (or compile them) dinamically to avoid writing statically the same binding with explicit indexes dozens of times – Zorgatone Sep 18 '17 at 10:28
  • 1
    I don't think there is an easy way. Perhaps something like https://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 could work for your use case. You'd have to use code instead of markup to establish "bindings", at least between the wrapper and the dynamically added components. – Günter Zöchbauer Sep 18 '17 at 10:32
  • @GünterZöchbauer thanks, that looks like a good hint in the right direction. I'll look into it and see if it works for me – Zorgatone Sep 18 '17 at 10:33
  • My use-case would be something that more closely resemble that of this question: https://stackoverflow.com/questions/36406382/angular-2-tabs-access-child-elements – Zorgatone Sep 18 '17 at 10:51
  • Also related: https://stackoverflow.com/questions/34260996/dynamically-bind-model-and-template-to-at-dom-node-in-angular-2 – Zorgatone Sep 18 '17 at 10:54

0 Answers0