I am trying to find a simple way of nesting a component in another component, by referencing it inside the content area of the parent component. This would be the parent:
@Component({
selector: 'app-foo',
template: `
<div>
<p>Some content around the nested component</p>
<ng-content></ng-content>
<p>And some more content below the nested component</p>
</div>
`
})
export class Foo {
}
And then I want to use it like this:
<app-foo>
<app-bar></app-bar>
</app-foo>
I think only strings are accepted inside the content area of a custom component, so this does not work. But it seems like a very generic use case and I can't find examples that do exactly this without making it very complicated. I am not an advanced Angular user so I like to keep things simple. Is there any documentation that I have missed, or are there any suggestions how to go about this?
