Core

Overlay

Panels next to an element: 12 placements, flip when there is no room, layers, Escape and outside click, focus back to the origin.

Last close: — · scroll so a button sits at the edge of the window — the panel flips.

Use it

const ref = inject(TxOverlay).open(template, {
  origin: button,
  viewContainerRef,
  placement: 'bottom-start',
  layer: 'popover',
});
ref.placement();      // actual side after a flip
ref.closed.subscribe(reason => …); // 'escape' | 'outside' | 'api' | …

Sticky headers

Mark sticky or fixed chrome with txOverlayInset. While it is pinned, panels open clear of it and slide under it like page content. Once open, a panel rides with its origin while the page scrolls; scrolling a container of the origin, such as a dialog body, closes it. This site marks its header and the tab bar of component pages.

<header class="app-header" txOverlayInset>…</header>
<nav class="sticky-tabs" txOverlayInset>…</nav>

// chrome outside Angular: a fixed amount
provideTectra({ preset: Tectra, overlay: { viewportInsets: { top: 56 } } });