title: Extend ng-boostrap popover component with custom angular directive
body: <p>What i try to achieve is to extend ngbPopover directive and wrap in custom directive all this proeprties so instead of showing them just to include my directive.</p>
  
  <p>For example i am using ngbpopover like this:</p>
  
  <pre><code>&lt;button
      type="button"
      class="btn btn-primary mb-4"
      placement="right-top"
      [ngbPopover]="popOver"
      popoverClass="popover-custom"
      #popOverRef="ngbPopover"
      triggers="manual"
      [autoClose]="false"
      (click)="popOverRef.toggle()"
      (hidden)="onPopoverClose(options)"
  &gt;
      Standard Picker
  &lt;/button&gt;
  &lt;ng-template #popOver&gt;
      &lt;popover [data]="options" [popover]="popOverRef"&gt;&lt;popover&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>My goal at the end is to have something like:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary mb-4" customDirective&gt;&lt;/button&gt;
  </code></pre>
  
  <p>so all this props to be handled inside customDirective. Tried to extend ngbPopoverDirective as code below but i struggle to show popover with this approach. Is this doable or some other idea?</p>
  
  <p>Custom directive:</p>
  
  <pre><code>import {
      Directive,
      ElementRef,
      Renderer2,
      Injector,
      ComponentFactoryResolver,
      ViewContainerRef,
      NgZone,
      Inject,
      ChangeDetectorRef,
      ApplicationRef,
      Input,
      OnInit,
  } from '@angular/core';
  import { NgbPopover, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
  import { DOCUMENT } from '@angular/common';
  
  @Directive({
      selector: '[popover]'
  })
  export class PopoverDirective extends NgbPopover implements OnInit {
      @Input()
      popover: string;
      config: NgbPopoverConfig = {
          autoClose: false,
          placement: 'right-top',
          triggers: "manual",
          container: 'body',
          disablePopover: false,
          popoverClass: 'popover-custom',
          openDelay: 0,
          closeDelay: 0
      }
  
      constructor(
          _elementRef: ElementRef&lt;HTMLElement&gt;,
          _renderer: Renderer2,
          injector: Injector,
          componentFactoryResolver: ComponentFactoryResolver,
          viewContainerRef: ViewContainerRef,
          config: NgbPopoverConfig,
          _ngZone: NgZone,
          @Inject(DOCUMENT) _document: any,
          _changeDetector: ChangeDetectorRef,
          applicationRef: ApplicationRef
      ) {
          super(
              _elementRef,
              _renderer,
              injector,
              componentFactoryResolver,
              viewContainerRef,
              config,
              _ngZone,
              _document,
              _changeDetector,
              applicationRef
          );
          console.log("here");
      }
  
      ngOnInit() {
          console.log("onInit")
      }
  }
  </code></pre>