4

I'm trying to extend NgbPopover in order to dispatch a custom action when the popover's open or close methods are called.

I have the following set up:

custom-popover.directive.ts

@Directive({  
    selector:'[customPopover]',
    exportAs:'customPopover'
}) 
export class CustomPopover extends NgbPopover {}

some-list.component.ts

<input #quantityInput
       (input)="onInputChange()"
       type="number"

       popoverTitle="Warning!"
       [customPopover]="validationError"
       #validationPopovers="customPopover">

<ng-template #validationError>{{ message }}</ng-template>

I expect this to behave like the original NgbPopover(allowing me to override the open and close methods if I so wish), but instead I get the following error:

Can't bind to 'customPopover' since it isn't a known property of 'input'.

EDIT (to show declarations/imports in modules):

custom-popover.module.ts

@NgModule({
    declarations: [
        CustomPopover
    ],
    imports: [
        NgbModule
    ],
    exports:[CustomPopover]
})
export class CustomPopoverModule { }

app.module.ts

@NgModule({
    imports: [
       ...
       CustomPopoverModule
    ],
    ...
})

some-list.module.ts

@NgModule({
    imports: [
        ...
        NgbModule,
        CustomPopoverModule
    ],
    ...
})
alecvn
  • 541
  • 1
  • 4
  • 15
  • 1
    You probably didn't add it to `declarations: [...]` and `exports: [...]` of a module or not imported the module where you are using it. – Günter Zöchbauer Oct 30 '17 at 10:44
  • Edited to show declarations and exports. I'll admit that I was fighting with those for a while before I got the final error (seemingly) from the template. But those errors usually complained about `[customPopover]` not being exported. – alecvn Oct 30 '17 at 11:12
  • 1
    Still can't find a mistake. Can you try to reproduce in http://stackblitz.com? – Günter Zöchbauer Oct 30 '17 at 12:00

1 Answers1

4

Okay I found the issue. In addition to supplying selector and exportAs properties, one also needs to add an Input() string that corresponds with the selector in order to apply [customPopover] to an element, so the directive becomes:

@Directive({  
    selector:'[customPopover]',
    exportAs:'customPopover'
}) 
export class CustomPopover extends NgbPopover {
    @Input()
    customPopover: string;
}
alecvn
  • 541
  • 1
  • 4
  • 15
  • was following this example but was not able to succeed. Do you have plunker or something with working solution? – Micko Apr 03 '20 at 11:41
  • no worries i got solution! Thanks for reply, anyway – Micko Apr 03 '20 at 22:19
  • @Micko, Could you share your solution plz – azerafati Apr 07 '20 at 14:22
  • @azerafati here is link to my question and also there is accepted answer that i posted :) Let me know if you have some questions. https://stackoverflow.com/questions/61010439/extend-ng-boostrap-popover-component-with-custom-angular-directive – Micko Apr 07 '20 at 15:49