Angular create dynamically component ASSERTION ERROR

Question

I have here a situation where I need to create dynamically components to be shown in a Tab im Angular/PrimeNG.

Tabs are not defined when application is started. Content of the tabs depends on what rights are defined for user and must therefore be created dynamically. Some Tabs may have the same layout, but are filled with different data (Like Tab 1 with booking data from US, Tab 2 with booking data from UK etc, Tab 3 with Payment Data for US, Tab 4 with Payment Data for UK)

So I would like to create everything dynamically. User logs in, I extract his rights and create according to it all Tabs as dynamic component. This works, but I am getting an ugly error in Chrome.

My view looks like:

<p-tableView orientation="left">
  <p-tabPanel *ngFor="let tab of tabs" [header]="tab.title">
    <ng-container *ngComponentOutlet="tab.contentComponent"></ng-container
  </p-tabPanel>
</p-tableView>

Now for the code:

tabs { title: String, contentComponent: any}[] = [];

constructor(..., private viewContainerRef : ViewContainerRef, private injector: EnvironmentInjector) { }

ngOnInit() {
   const bookedRange = this.viewContainerRef.createComponent(BookedRangeComponent, {environmentInjector: this.injector});
    // Setting some Parameter
   bookedRange.instance.filterBookedID = 1000;
   bookedRange.instance.filterUserParam = "AB";
   ...
  this.tabs = [
    { title: "DefaultBookedView", contentComponent: bookedRange }
    ...
  ]

Here the BookedRangeComponent:

@Component({
selector: 'booked-range',
templateUrl: 'booked-range.html',
})
export class BookedRangeComponent {
   filterBookedID : number;
   filterUserParam: string;
....
}

When I start this, this component seems to be created correctly and is also shown in the Tab View with all parameter sets, but in the Development Console of Chrome I see the following Error:

ASSERTION ERROR: It looks like Component Factory was provided as the first argument and an options object as the second argument. This combination of arguments is incompatible. You can either change the first argument to provide component type or change the second argument to be a number (representing an index at which to insert the new component's host view into the container

Same happens, if I remove the option part at the end:

const bookedRange = this.viewContainerRef.createComponent(BookedRangeComponent);

Exactly same error.

Any ideas how to fix it? Or better ideas?

Shlang · Accepted Answer · 2024-03-17 22:32:57Z

1

The error you're getting comes not from the call

this.viewContainerRef.createComponent(BookedRangeComponent)

but from a similar one that *ngComponentOutlet does internally.

*ngComponentOutlet accepts a component class as input and handles everything needed for creating an instance of the component and adding it to the DOM so you don't need to do it by using this.viewContainerRef.createComponent(BookedRangeComponent).

answered Mar 17, 2024 at 22:32

Shlang

3,29019 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular create dynamically component ASSERTION ERROR

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related