0

I am trying to do the following in my first Angular (4) porject:

<parent-component-A>
   <child-component-X>//some template, css, logic etc...</child-component-X>
</parent-component-A>

<parent-component-A>
   <child-component-Y>//another template, css, logic etc...</child-component-Y>
</parent-component-A>

<parent-component-C>
   <child-component-Z>//a third different template, css, logic etc...</child-component-Z>
</parent-component-C>
...

The structure of my project for now is:

                             ------------
                             |   app    |
                             ------------
                           /              \
                          /                \
                    ------------      ------------
                    |The parent|      |   other  |
                    ------------      ------------
                  /          |
                 /           |
                /            |
               /             |
              /              |
        ------------   ------------
        | Child-1  |   | Child-2  | ... 3 and so on
        ------------   ------------

I am not sure how to implement the idea. In the app template, the main one, I want to refer to the selectors of "the parent", literally the html code above but as the children of the parent component must be loaded in its directives I don't see how I can change which child view to be loaded from there, so my guess is that it has to be specified in the app component, where "the-parent" component is used. How can I tell Angular which child component it to load int he view of the parent one? Shall I do that from the ' s template? Shall I change my project structure?

KDX2
  • 945
  • 2
  • 14
  • 31
  • Looks like a similar use case as https://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 to me (if `` is supposed to be part of ``'s template. If you literally just want to pass content to a parent as shown in your question, just add `` to the parent components template. – Günter Zöchbauer Aug 16 '17 at 11:11
  • If you don't know beforehand what component will be the child, you probably need to insert a component dynamically, read [Here is what you need to know about dynamic components in Angular](https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e) – Max Koretskyi Aug 16 '17 at 11:23
  • I know which components I will nest, it is I would say rather a static project. The only thing I need to figure out is how to tell the parent view which child view to load in itself. I am reading now about that ng-content directive to see if it can do the job. For now it's promising. :) – KDX2 Aug 16 '17 at 11:36

0 Answers0