API: Core

OverlayTriggerDirective

Mark a <ng-template inside your component as the overlay content.

Overview

Mark a <ng-template> inside your component as the overlay content.

Usage:

<button qzOverlayTrigger [overlayTemplate]="tpl" placement="bottom-start">
  Open
</button>

<ng-template #tpl>
  <div class="my-dropdown">...</div>
</ng-template>

Or pass a TemplateRef programmatically via [overlayTemplate].

Kind: Directive
Export as: qzOverlay
Source: packages/core/src/overlay/overlay-trigger.directive.ts:46

Selector

[qzOverlayTrigger]

Inputs

Input	Type	Default	Description
`overlayTemplate`	`TemplateRef<unknown> \| null`	`null`	The template to render inside the overlay
`placement`	`OverlayPlacement`	`'bottom-start'`
`offset`	`number`	`4`
`flip`	`boolean`	`true`
`flipAxis`	`OverlayFlipAxis`	`'main'`
`closeOnClickOutside`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`closeOnScroll`	`boolean`	`true`
`matchAnchorWidth`	`boolean`	`false`

Outputs

Output	Payload	Description
`opened`	`void`
`closed`	`void`

Properties

Name	Type	Description
`readonly isOpen`	`Signal<boolean>`

Public methods

open

open(): void

close

close(): void

toggle

toggle(): void

updatePosition

updatePosition(): void

Recompute position (e.g. after content changes size)