Reputation: 13
Is it possible to build an angular component such that it takes in
<app-parent>
<app-child>Option 1</app-child>
<app-child>Option 2</app-child>
</app-parent>
Where it will parse it out in the HTML DOM and logic that is desired? In this case, a dropdown component.
Upvotes: 1
Views: 411
Reputation: 2742
You can certainly do that. When you declare the html of your parent component, include 'ng-content' like below:
// app-parent
<div>
<ng-content></ng-content>
</div>
You use the <ng-content></ng-content>
tag as a placeholder for that dynamic content, then when the template is parsed Angular will replace that placeholder tag with your content.
You can use ng-content similarly in your child components as well, in case they are meant to be container.
Upvotes: 1