My use case was to render components inside the Angular Material Tabs component. Despite searching online, I couldn't find any relevant resources, so I had to figure it out myself.
Below is the structure we want to use to define the components that should be displayed inside the tabs:
tabs = <Tab[]>[
{
label: 'Tab Component',
component: TabComponent,
data: {
title: 'Tab 1 Import information',
content: `Donec lacinia condimentum efficitur. Phasellus tempor est in luctus
facilisis.`,
},
},
{
label: 'Random component',
component: RandomComponent,
data: {
text: 'Text passed on from the random component',
},
},
];
Component
Here's the complete code snippet for the component that renders the components inside the tab container.
type Tab = {
label: string;
component: Type<any>;
data: Record<string, any>;
};
@Component({
selector: 'app-tabcontainer',
standalone: true,
imports: [MatTabsModule],
templateUrl: './tabcontainer.component.html',
styleUrl: './tabcontainer.component.css',
})
export class TabcontainerComponent {
viewContainerRef = inject(ViewContainerRef);
tabs = <Tab[]>[
{
label: 'Tab Component',
component: TabComponent,
data: {
title: 'Tab 1 Import information',
content: `Donec lacinia condimentum efficitur. Phasellus tempor est in luctus
facilisis.`,
},
},
{
label: 'Random component',
component: RandomComponent,
data: {
text: 'Text passed on from the random component',
},
},
];
ngOnInit() {
this.loadComponent(this.tabs[0]);
}
loadComponent(tab: Tab) {
this.viewContainerRef.clear();
const ref = this.viewContainerRef.createComponent<any>(tab.component);
// Pass on the props
for (const prop in tab.data) {
if (Object.prototype.hasOwnProperty.call(ref.instance, prop)) {
ref.instance[prop] = tab.data[prop];
}
}
}
onTabSelected(index: number) {
this.loadComponent(this.tabs[index]);
}
}
Caching the tabs
I conducted performance testing to see if caching the component references and loading them from the cache upon request would improve render time. However, there was no improvement in render time.
Angular signals
The code doesn't work with input() signals yet.
Top comments (0)