injectLayout

A signal with the host theme, the available height, and the safe-area insets.

injectLayout(): Signal<LayoutState>

Read the layout that the host gives the view, then match it.

import { injectLayout } from "ng-mcp-ui/web";

export class PollWidget {
  readonly layout = injectLayout();
}

<div [class.dark]="layout().theme === 'dark'"
     [style.max-height.px]="layout().maxHeight">

LayoutState

Field	Type	Contents
`theme`	`"light" \| "dark"`	The theme of the host.
`maxHeight`	`number \| undefined`	The height the view may use, in pixels. `undefined` when the host sets no limit.
`safeArea`	`{ insets: { top, right, bottom, left } }`	Pixels to keep clear of notches and home indicators.

Match the host theme. A view that ignores it looks wrong on a dark host.

:host { color-scheme: light dark; }

Treat maxHeight as a limit, not as a target. A view taller than the limit is cut off or scrolls, which depends on the host.

On a host that supports it you can ask for a different size with injectRequestSize.

Apply the insets as padding on your outermost element.

<div [style.padding-top.px]="layout().safeArea.insets.top">

Supported on the two host runtimes. A host that reports no value gets a default: "light" for the theme, and zero for each inset.