CODEWITHSUNDEEP
angular
Mariusz.v7
Mariusz.v7

Reputation: 2432

Angular.io How to render @ContentChildren elements?

I have the following component:

@Component({
  selector: 'seed-layout',
  ...
})
export class LayoutComponent implements OnInit {
  @ContentChildren(HeaderEntryComponent, { descendants: true }) 
     menuEntries: HeaderEntryComponent[];
}

I'd like to pass some components like this:

<seed-layout>
  <seed-header-entry>1</seed-header-entry>
  <seed-header-entry>2</seed-header-entry>
  <seed-header-entry>3</seed-header-entry>
</seed-layout>

menuEntries are getting populated, that's ok. But how then I'm supposed to render them inside LayoutComponent?

Upvotes: 0

Views: 291

Answers (1)

Coffee-Tea
Coffee-Tea

Reputation: 1188

You should use ng-content inside you LayoutComponent template in that place where they have to be rendered.

<ng-content></ngcontent>

As well u can use select="seed-header-entry" attribute of ng-content to specify contents in diff places and if this content are different.

Upvotes: 1

Related Questions