Angular: Custom Component in Custom Component

Question

After lots of searching: Is it possible to nest custom components in custom components?

I've created an empty angular cli - project and created ComponentAComponent (selector: 'componentA') and ComponentBComponent (selector: 'componentB').

My app.component.html looks like:

<componentA>
  <componentB></componentB>
  <componentB></componentB>
</componentA>
<componentB></componentB>

What I would expect:

Component A works!
Component B works!
Component B works!
Component B works!

But only

Component A works!
Component B works!

gets rendered. As I want to implement a custom list with custom list-items: What do I have to do to render custom components nested in custom components?

After a lot of google/ stackoverflow/ trial and error - grateful for any advice or link you can give me. Tried so much stuff with imports and declarations but nothing worked.

In case it helps I can provide a github repository with code.

Kind regards

EDIT: ABOS provided the correct answer. I added

<ng-content></ng-content>

to componentA.html and now all nested elements get rendered. So simple, but I did not find it. Thank you!

looks like you should use <ng-content/> in your componentA template. — ABOS
– ABOS, Commented Jan 18, 2019 at 19:14
Thank you so much! Now it works - finaly. If you post it as answer I will mark it as correct. I will also provide a working example. Where can I find this in the docs - I must have missed it. Again - thank you!! — Tanno Finn
– Tanno Finn, Commented Jan 18, 2019 at 19:24

ABOS · Accepted Answer · 2019-01-18 19:26:30Z

1

If you want to add html/components dynamically, you can use <ng-content>. There are tons of tutorials on it, e.g. https://blog.angular-university.io/angular-ng-content/

answered Jan 18, 2019 at 19:26

ABOS

3,8413 gold badges19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Custom Component in Custom Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related