angularbootstrap-4angular-bootstrap

Cant hide popover arrow

Im building an Angular component

Im trying to hide the arrow of bootstrap popover whit CSS but is not working.

Html:

    <button type="button" class="btn btn-link" placement="bottom-right"
      [ngbPopover]="popContent">
      <fa-icon class="text-white" [icon]="['fas', 'user']" size="lg"></fa-icon>
    </button>

     <ng-template #popContent>Hello!</ng-template>

CSS:

.popover .arrow {
    display: none !important;
}

But if I apply the CSS from inspector, it works

Im using: https://ng-bootstrap.github.io/

Solution

  • You will need to use pseude-css selectors to achieve this,

    :host::ng-deep ngb-popover-window::ng-deep .arrow{
   display: none !important;
}

    Lets break it down,

    when you click on button, it will generate ngb-popover-window component in dom.

    So, from :host select ngb-popover-window and from ngb-popover-window select .arrow and set styles.

    :host -> ngb-popover-window -> .arrow,

    to select element from component without affecting global styles, you need to use ng-deep as css selector.