Using Angular 4's ngComponentOutlet to showcase ContentChildren that are dynamically changing

Question

Using Angular 4's ngComponentOutlet to showcase ContentChildren that are dynamically changing

My main objective is to create a unique container component with a dynamic list of customized card components that can be accessed individually (instead of as a group using ng-content).

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

My goal is to use ContentChildren query to fetch each child component and place it inside a styled div within the custom card holder.

The aim is to display each content child in its own styled div to ensure it fits neatly inside the holder.

I have experimented with TemplateOutlet and some other options, but ComponentOutlet seems like the most promising choice.

I want to keep the code above clean without any unnecessary clutter. I realize that data can simply be input and the component used without transclusion, but this could make the interface more complex for others to understand.

angular typescript

Answer 1

Answer №1

Thanks to @Arivinds valuable insight, a solution was found to address a syntax issue and partially resolve the original problem. The key takeaway from his comment can be found here.

It should be noted that ngComponentOutlet requires a Type or Class, not an instance.
A workaround involved nesting the Class within a list alongside the instance:
```
cardList = [{ component: CardClass, context: instance }]
```

To address this, a new CardHolder component was introduced. Its template consisted of a simple

<ng-content></ng-content>

, replacing the need for the Card class in the cardList. Subsequently, the ngComponentOutlet's content property was utilized to project the actual Card within 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>`

An important note: While working with the content property of ngComponentOutlet, it is vital to bear in mind that it accepts a Node when querying for ContentChildren. In this case, accessing the nativeElement through double square brackets proved beneficial.

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

This approach aims to assist others facing similar challenges in their projects.

Note: The functionality allowing for inputs on dynamic components is reportedly under development but not yet fully implemented.

Note: It is recommended to include any dynamic components in the entryComponents array of the NgModule.

Answer 2

Thanks to @Arivinds valuable insight, a solution was found to address a syntax issue and partially resolve the original problem. The key takeaway from his comment can be found here.

It should be noted that ngComponentOutlet requires a Type or Class, not an instance.
A workaround involved nesting the Class within a list alongside the instance:
```
cardList = [{ component: CardClass, context: instance }]
```

To address this, a new CardHolder component was introduced. Its template consisted of a simple

<ng-content></ng-content>

, replacing the need for the Card class in the cardList. Subsequently, the ngComponentOutlet's content property was utilized to project the actual Card within 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>`

An important note: While working with the content property of ngComponentOutlet, it is vital to bear in mind that it accepts a Node when querying for ContentChildren. In this case, accessing the nativeElement through double square brackets proved beneficial.

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

This approach aims to assist others facing similar challenges in their projects.

Note: The functionality allowing for inputs on dynamic components is reportedly under development but not yet fully implemented.

Note: It is recommended to include any dynamic components in the entryComponents array of the NgModule.

Using Angular 4's ngComponentOutlet to showcase ContentChildren that are dynamically changing

Answer №1

Similar questions

What is the method for displaying script commands within package.json files?

The type definition file for 'jest' cannot be located, despite the fact that jest has been successfully installed

The deployment of the remix is unsuccessful in Vercel, even though it functions perfectly during development. The error message states that 'AbortController' is not

Creating validation for an autosave reactive form in Angular 2: A step-by-step guide

It is not possible to import Angular MockBackend with a production build

Exploring the functionality of two-way data binding in Angular - a beginner's guide

Storing a variable in Cypress with Typescript for use in the afterEach teardown step

Exploring the world of Angular CLI testing and the versatility of

Learn how to dynamically enable or disable the add and remove buttons in the PrimeNG PickList using Angular 2

Error in Angular: Unable to Access Property '..' of null

Utilize the TypeScript Compiler API to extract the Type Alias Declaration Node from a Type Reference Node

Creating applications with Angular2 and TypeScript is possible even without utilizing NPM for development

Unable to execute karma test cases as a result of ngOnDestroy being inaccessible

Configuring rows in React datagrid

What is the process for importing an mp3 file into a TypeScript project?

Data binding with ngModel is contingent on certain conditions

Chrome stack router outlet and the utilization of the Angular back button

ng-for loop not properly rendering array of collections in table cells

React Native Redux Toolkit: Despite the state showing a non-serializable value, my object is confirmed to be serializable

What is the process for implementing a type hint for a custom Chai assertion?