Seeking assistance with creating dynamic Tabs in TabView of PrimeNG. The components are displaying properly, but I am unsure how to access their properties.
I am following the guidelines provided at https://angular.io/guide/dynamic-component-loader and using the example shown in the bottom part at https://angular.io/api/core/ViewContainerRef#createComponent.
The bookingView.html file contains:
<p-tableView>
<p-tabPanel *ngFor="let tab of tabs">
<ng-container *ngComponentOutlet="tab.component"></ng-container
</p-tabPanel>
</p-tableView>
The panel definitions are stored in a Service called bookingService.ts:
getAllInitialTabs() {
return [
{
title: "BookingOverview",
component: BookingOverviewComponent,
},
{
title: "BookingDetails for US",
component: BookingDetailsComponent,
},
{
title: "BookingDetails for GER",
component: BookingDetailsComponent,
}
] as {title: string, component: Type<any>}[];
In my main component, I load the server data into an array of tabs:
ngOnInit() {
this.tabs = this.bookingService.getAllInitialTabs();
}
It seems to be working fine, showing all Tabs in the PrimeNG TabView.
However, I am struggling to access the components to set/get values and receive callbacks when actions are executed.
I have tried:
vcr = inject(ViewContainerRef);
setFields() {
const compRef = this.vcr.createComponent(this.tabs[0].component);
compRef.changeDetectorRef.detectChanges();
(<BookingOverviewComponent>compRef.instance).maxAmount = 2000;
}
Unfortunately, the view does not update, and the value of maxAmount remains unchanged.
Any suggestions on how to access the created component and populate it with data? Also, how can I capture information about user interactions such as Button Click events?