CngxPopoverArrow

Directivev0.1.0

projects/common/popover/popover-panel-slots.ts

Info
API

Import#

import { CngxPopoverArrow } from '@cngx/common/popover'

Description#

Custom arrow ornament template. Overrides the default rotated-diamond arrow when projected as a child of <cngx-popover-panel>. The library routes the resolved panel edge and the live inline-axis offset to the template via CngxPopoverArrowContext.

<cngx-popover-panel #pop [showArrow]="true">
  <ng-template cngxPopoverArrow let-edge="edge" let-offsetPx="offsetPx">
    <svg class="brand-arrow" [attr.data-edge]="edge"
         [style.--offset]="offsetPx ? offsetPx + 'px' : '50%'">
      <use href="#arrow-glyph" />
    </svg>
  </ng-template>
</cngx-popover-panel>

Metadata#

Selector: ng-template[cngxPopoverArrow]

Index#

Properties

templateRef

Instance Properties#

templateRef#unknown

Readonly

inject<TemplateRef<CngxPopoverArrowContext>>(TemplateRef)