I have developed a popover module that consists of two components and three directives. However, I am encountering an issue where I am unable to utilize the directives outside of the main component. Whenever I try to do so, I face an editor error stating:
No provider for MatPopoverComponent
and a browser error displaying:
ERROR Error: NodeInjector: NOT_FOUND [MatPopoverComponent]
Is there any workaround to enable me to use the directives beyond the component?
The current implementation works as follows:
<mat-popover>
<mat-popover-content>Some Content</mat-popover-content>
<button toggle-popover>Click Me</button>
</mat-popover>
However, my desired usage is this:
<mat-popover>
<mat-popover-content>Some Content</mat-popover-content>
</mat-popover>
<button toggle-popover>Click Me</button>
One of the directives is shown below (all three are identical except for the click event function):
@Directive({
selector: '[toggle-popover]'
})
export class TogglePopoverDirective {
public constructor(private el: ElementRef<HTMLElement>, @Host() private popover: MatPopoverComponent) { }
@HostListener('click')
public onClick() {
this.popover.toggle(this.el)
}
}
This snippet showcases the main component utilizing a directive, errors arise when using it outside of this context:
@Component({
selector: 'mat-popover',
templateUrl: './popover.component.html',
styleUrls: ['./popover.component.scss']
})
export class MatPopoverComponent {
@ContentChild(MatPopoverContentComponent)
public content: MatPopoverContentComponent
public toggle(el: ElementRef<HTMLElement>) {
this.content.elementRef = el
this.content.togglePopover()
}
public open(el: ElementRef<HTMLElement>) {
this.content.elementRef = el
this.content.openPopover()
}
public close() {
this.content.closePopover()
}
}
Below is the definition of the popover module:
@NgModule({
imports: [
CommonModule,
BrowserModule,
MatDialogModule
],
bootstrap: [MatPopoverComponent],
declarations: [
MatPopoverComponent,
MatPopoverContentComponent,
OpenPopoverDirective,
ClosePopoverDirective,
TogglePopoverDirective
],
exports: [
MatPopoverComponent,
MatPopoverContentComponent,
OpenPopoverDirective,
ClosePopoverDirective,
TogglePopoverDirective
]
})
export class MatPopoverModule { }