I want to create an Angular component which consists of a set of tabs, the first one is always present, but then the rest of the tabs can vary. So I decided to create a component BaseTabView which defines the first tab, and then use <ng-content> so that the child component which inheritates from this component can add some extra tabs. This is what my base component looks like:
import { Component } from '@angular/core';
@Component({
selector: 'app-base-tab-view',
template: `
<p-tabView>
<p-tabPanel header="Common Tab">
<div>Content for the common tab</div>
</p-tabPanel>
<ng-content></ng-content>
</p-tabView>
`,
})
export class BaseTabViewComponent {}
then the child ChildTabViewComponent component, which inherits from this component:
import { Component } from '@angular/core';
@Component({
selector: 'app-child-tab-view',
template: `
<app-base-tab-view>
<p-tabPanel header="Child Tab 1">
<div>Content for Child Tab 1</div>
</p-tabPanel>
<p-tabPanel header="Child Tab 2">
<div>Content for Child Tab 2</div>
</p-tabPanel>
</app-base-tab-view>
`,
})
export class ChildTabViewComponent extends BaseTabViewComponent {
constructor() {
super();
}
}
But when I insert my child component in my template, only the common tab gets displayed.
In the console, get this error:
ERROR NullInjectorError: R3InjectorError(AppModule)[TabView -> TabView -> TabView]:
NullInjectorError: No provider for TabView!
Although TabView is correctly imported in app.modules.ts.
1
Ensure that you are importing the TabViewModule and remove the TabView:
import { TabViewModule } from 'primeng/tabview';
@NgModule({
...,
imports: [
...,
TabViewModule
],
})
export class AppModule { }