Currently, I am faced with a scenario where I have to dynamically create components to be displayed within tabs in Angular/PrimeNG.
The tabs are not predefined when the application starts. The content of the tabs is dependent on the user's assigned rights and therefore must be generated dynamically. While some tabs may have similar layouts, they will be filled with different data (such as Tab 1 displaying booking data from the US, Tab 2 showing booking data from the UK, etc., and Tab 3 and 4 for payment data).
My goal is to dynamically create all tabs based on the user's permissions upon login. I've managed to achieve this functionality, however, it seems to be triggering an error in Google Chrome.
This is how my view is structured:
<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>
Below is a snippet of 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 Parameters
bookedRange.instance.filterBookedID = 1000;
bookedRange.instance.filterUserParam = "AB";
...
this.tabs = [
{ title: "DefaultBookedView", contentComponent: bookedRange }
...
];
Here is the BookedRangeComponent:
@Component({
selector: 'booked-range',
templateUrl: 'booked-range.html',
})
export class BookedRangeComponent {
filterBookedID: number;
filterUserParam: string;
....
}
While the component appears to be created correctly and displayed within the Tab View with all parameters set, an error message is logged in the Chrome Development Console:
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).
The same error persists even if I remove the options part at the end:
const bookedRange = this.viewContainerRef.createComponent(BookedRangeComponent);
I'm seeking suggestions on how to resolve this issue, or perhaps better alternatives?