Teng Wei Hao
Teng Wei Hao

Reputation: 13

Angular Components in components

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

Answers (1)

Umesh
Umesh

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

Related Questions