0

My ultimate goal is to just have a custom container component with a dynamic list of custom card components that are individually accessible (not as a single entity using ng-content).

<custom-card-holder> <custom-card></custom-card> <custom-card></custom-card> ... <custom-card></custom-card> </custom-card-holder>

Ideally I just grab the child components with ContentChildren query and put each one into a styled div inside the custom card holder.

The displaying each content child individually in the styled div to get it to fit nicely in the holder.

I have tried using TemplateOutlet and a few other odds and ends but the ComponentOutlet seems the most promising.

I would like to avoid any extra clutter on the code shown above. I understand the data can just be input and the component can be used inside without any transclusion but that just means a more complex interface for others to figure out.

rjustin
  • 1,399
  • 8
  • 19
  • Can you give an example of what you're trying to achieve? – yurzui Nov 28 '17 at 04:26
  • @yurzui in essence an interface like
    where the child components are nested rather than created in the parent component. The only difference is its in angular 4 with custom components. The children can all be the same type too     – rjustin Nov 28 '17 at 04:35
  • 1
    Can you have a look at this [**answer**](https://stackoverflow.com/questions/45138665/how-to-ngfor-on-multiple-types-of-components-using-ngcomponentoutlet/45138973#45138973) – Aravind Nov 28 '17 at 07:05

1 Answers1

1

@Arivinds comment here led to fixed a syntax problem and also a semi-workaround for the original issue.

  1. The ngComponentOutlet takes a Type/Class not an instance.

  2. Nesting the Class in a list with the instance:

    cardList = [{ component:CardClass,context:instance}]

In the end I added a CardHolder component which template is just a <ng-content></ng-content> and instead of Card class I had CardHolder in the cardList.

Then I used the content property of ngComponentOutlet to project my actual Card into the CardHolder.

 cardList:any[] = [
  {
    type:CardHolder,
    context:{}
  }
  ];

`<div #scrollItem class="item" *ngFor="let card of cardList">
  <ng-container *ngComponentOutlet="card.type;content: card.context;"></ng-
container>
</div>`

The catch is that content(ngComponentOutlet) takes a Node so When I query for ContentChildren I purposefully grabbed the ElementRef and used nativeElement. Note the double square brackets.

`ngAfterContentInit(){
    this.cardList = this.cards.toArray().map((card)=>{
       return {type:CardHolder,context:[[card.nativeElement]]};
    })
 }`

Hope this helps anyone in the same boat.

Note: The ability to add inputs to dynamic components is supposedly in the works/backlogged but currently not implemented

Note: Also I believe any dynamic components must be in the entryComponents array of the NgModule

Community
  • 1
  • 1
rjustin
  • 1,399
  • 8
  • 19