Angular：自定义组件中的自定义组件

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!

Answer 1

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