Class UIMasterDetailView<T>

A master-detail layout that shows a list of items in a UITableView and renders a detail template for the currently selected item.

Basic usage (table mode)

<ui-master-detail-view [datasource]="adapter" title="People">
  <ui-text-column key="name" headerText="Name" />
  <ui-text-column key="email" headerText="Email" />

  <ng-template #detail let-object>
    <h3>{{ object.name }}</h3>
    <p>{{ object.email }}</p>
  </ng-template>
</ui-master-detail-view>

Tree mode

<ui-master-detail-view [datasource]="treeDs" [treeDisplayWith]="labelFn">
  <ng-template #detail let-object>
    <h3>{{ object.name }}</h3>
  </ng-template>
</ui-master-detail-view>

With filter

<!-- Auto-inferred fields from columns + data types -->
<ui-master-detail-view [datasource]="adapter" [showFilter]="true">
  <ui-text-column key="name" headerText="Name" />
  <ui-text-column key="email" headerText="Email" />
  <ng-template #detail let-object>…</ng-template>
</ui-master-detail-view>

With custom filter template (override)

<ui-master-detail-view [datasource]="adapter" [showFilter]="true">
  <ng-template #filter>
    <ui-filter [fields]="fields" [(value)]="descriptor"
               (expressionChange)="ds.filterBy($event)" />
  </ng-template>
  <!-- columns and detail template -->
</ui-master-detail-view>

Type Parameters

T = unknown

Constructors

constructor

new UIMasterDetailView<T = unknown>(): UIMasterDetailView<T>
Type Parameters
- T = unknown
Returns UIMasterDetailView<T>
- Defined in packages/ui-blocks/src/lib/master-detail-view/master-detail-view.component.ts:541

Properties

`Readonly`caption

caption: InputSignal<string> = ...

Accessible caption for the embedded table.

`Readonly`columns

columns: Signal<readonly UITableViewColumn[]> = ...

Projected table-view columns. These are forwarded to the internal <ui-table-view>.

`Readonly`datasource

datasource: InputSignal<IDatasource<T> | ITreeDatasource<T> | undefined> = ...

The datasource powering the master list.

Accepts any IDatasource (for flat table mode) or an ITreeDatasource (for hierarchical tree mode). The component detects the type at runtime and renders the appropriate view.

`Readonly`detailTemplate

detailTemplate: Signal<TemplateRef<MasterDetailContext<T>> | undefined> = ...

Detail template — rendered when an item is selected.

`Readonly`disabled

disabled: InputSignal<boolean> = ...

Whether the embedded table view is disabled.

`Readonly`expressionChange

expressionChange: OutputEmitterRef<FilterExpression<T>> = ...

Emits the FilterExpression every time the filter rules change. Emits an empty array when no valid rules remain.

For FilterableArrayDatasource instances the expression is applied automatically — this output is for consumers who use a custom datasource and need to handle filtering manually.

`Readonly`filterDescriptor

filterDescriptor: ModelSignal<FilterExpression<T>> = ...

The filter descriptor state (two-way bindable).

Provides full read/write access to the filter's rule set and junction mode. Defaults to an empty AND descriptor.

`Readonly`filterExpanded

filterExpanded: InputSignal<boolean> = ...

Whether the filter section starts expanded.

`Readonly`filterFields

filterFields: InputSignal<FilterFieldDefinition<T>[] | undefined> = ...

Explicit filter field definitions.

When provided these override the auto-inferred fields. Only relevant when no #filter template is projected.

`Readonly`filterModeLocked

filterModeLocked: InputSignal<boolean> = ...

Whether the filter toggle button is hidden.

When true, the toggle is removed and the filter section stays permanently in whatever state filterExpanded dictates:

filterExpanded: true + filterModeLocked: true → filter is always visible, cannot be collapsed.
filterExpanded: false + filterModeLocked: true → filter bar is completely hidden (equivalent to showFilter: false).

This value is also forwarded to the embedded <ui-filter> as [modeLocked], preventing the user from toggling between simple and advanced filter modes.

`Readonly`filterTemplate

filterTemplate: Signal<TemplateRef<unknown> | undefined> = ...

Optional filter template — shown in the collapsible filter area.

`Readonly`listConstraints

listConstraints: InputSignal<SplitPanelConstraints> = ...

Size constraints for the list (first) panel in pixels. Defaults to { min: 200 }.

`Readonly`pageIndex

pageIndex: InputSignal<number | undefined> = ...

External page index (zero-based) for the embedded table view. Leave undefined to let the built-in paginator manage it.

`Readonly`pageSize

pageSize: InputSignal<number | undefined> = ...

Page size for the embedded table view's paginator. Leave undefined to use the table's default.

`Readonly`placeholder

placeholder: InputSignal<string> = ...

Placeholder text shown when no item is selected.

`Readonly`resizable

resizable: InputSignal<boolean> = ...

Whether table columns can be resized by dragging header borders. Defaults to true.

`Readonly`rowHeight

rowHeight: InputSignal<number> = ...

Row height in pixels for the internal table-view. Forwarded to <ui-table-view [rowHeight]>. Defaults to 36 px.

`Readonly`rowIndexHeaderText

rowIndexHeaderText: InputSignal<string> = ...

Header text for the row-index column. Defaults to "#".

`Readonly`selectedChange

selectedChange: OutputEmitterRef<T | undefined> = ...

Emits whenever the selection changes. Carries the selected item or undefined.

`Readonly`selectionModel

selectionModel: SelectionModel<T> = ...

Selection model for the table-view (single mode).

`Readonly`showBuiltInPaginator

showBuiltInPaginator: InputSignal<boolean> = ...

Whether to show the table's built-in paginator. Defaults to false.

`Readonly`showFilter

showFilter: InputSignal<boolean | undefined> = ...

Whether the filter section is visible.

true — always show the filter.
false — never show the filter.
undefined (default) — auto-detect: show the filter when the resolved datasource is a FilterableArrayDatasource.

When shown without a projected #filter template, the component embeds a <ui-filter> internally using auto-inferred field definitions.

`Readonly`showRowIndexIndicator

showRowIndexIndicator: InputSignal<boolean> = ...

Whether to show row-index numbers in the table.

`Readonly`splitCollapseTarget

splitCollapseTarget: InputSignal<SplitCollapseTarget> = ...

Which panel to collapse when the divider is double-clicked. Defaults to 'first' so the list panel can be collapsed.

`Readonly`splitName

splitName: InputSignal<string | undefined> = ...

Optional localStorage key for persisting the split panel sizes. When set the user's last divider position is restored on init.

`Readonly`splitSizes

splitSizes: InputSignal<readonly [number, number]> = ...

Initial split sizes as a [list, detail] percentage tuple. Must sum to 100. Defaults to [33, 67].

`Readonly`tableId

tableId: InputSignal<string> = ...

Unique table identifier used for persisting column widths. When set, column widths are stored in localStorage.

`Readonly`title

title: InputSignal<string> = ...

Title displayed above the list panel.

`Readonly`treeDisplayWith

treeDisplayWith: InputSignal<(data: T) => string> = ...

Function that returns a display string for tree node data. Only used in tree mode when no #nodeTemplate is projected. Defaults to String(data).

`Readonly`treeNodeTemplate

treeNodeTemplate: Signal<TemplateRef<TreeNodeContext<T>> | undefined> = ...

Optional tree-node template — forwarded to <ui-tree-view>. Receives TreeNodeContext as its context.

Methods

onFilterExpressionChange

onFilterExpressionChange(expression: FilterExpression<T>): void
Called by the embedded <ui-filter> when the expression changes.
- For FilterableArrayDatasource the expression is applied via filterBy() and the adapter is refreshed.
- For tree mode the expression is compiled into a predicate for the tree-view's filterPredicate input.
- Always emits via expressionChange so consumers with custom datasources can react.
Parameters
- expression: FilterExpression<T>
Returns void
- Defined in packages/ui-blocks/src/lib/master-detail-view/master-detail-view.component.ts:567

Class UIMasterDetailView<T>

Basic usage (table mode)

Tree mode

With filter

With custom filter template (override)

Type Parameters

Index

Constructors

Properties

Methods

Constructors

constructor

Type Parameters

Returns UIMasterDetailView<T>

Properties

Readonlycaption

Readonlycolumns

Readonlydatasource

ReadonlydetailTemplate

Readonlydisabled

ReadonlyexpressionChange

ReadonlyfilterDescriptor

ReadonlyfilterExpanded

ReadonlyfilterFields

ReadonlyfilterModeLocked

ReadonlyfilterTemplate

ReadonlylistConstraints

ReadonlypageIndex

ReadonlypageSize

Readonlyplaceholder

Readonlyresizable

ReadonlyrowHeight

ReadonlyrowIndexHeaderText

ReadonlyselectedChange

ReadonlyselectionModel

ReadonlyshowBuiltInPaginator

ReadonlyshowFilter

ReadonlyshowRowIndexIndicator

ReadonlysplitCollapseTarget

ReadonlysplitName

ReadonlysplitSizes

ReadonlytableId

Readonlytitle

ReadonlytreeDisplayWith

ReadonlytreeNodeTemplate

Methods

onFilterExpressionChange

Parameters

Returns void

Settings

On This Page

`Readonly`caption

`Readonly`columns

`Readonly`datasource

`Readonly`detailTemplate

`Readonly`disabled

`Readonly`expressionChange

`Readonly`filterDescriptor

`Readonly`filterExpanded

`Readonly`filterFields

`Readonly`filterModeLocked

`Readonly`filterTemplate

`Readonly`listConstraints

`Readonly`pageIndex

`Readonly`pageSize

`Readonly`placeholder

`Readonly`resizable

`Readonly`rowHeight

`Readonly`rowIndexHeaderText

`Readonly`selectedChange

`Readonly`selectionModel

`Readonly`showBuiltInPaginator

`Readonly`showFilter

`Readonly`showRowIndexIndicator

`Readonly`splitCollapseTarget

`Readonly`splitName

`Readonly`splitSizes

`Readonly`tableId

`Readonly`title

`Readonly`treeDisplayWith

`Readonly`treeNodeTemplate