Skip to content

YuvMasterDetailsComponent

component

Component rendering a master/details view.

Example :

<yuv-master-details [(detailsActive)]="detailsActive">
<ng-template #yuvMasterPane>Main Pane</ng-template>
<ng-template #yuvDetailsPane>Details Pane</ng-template>
</yuv-master-details>

Selector: yuv-master-details

Standalone: Yes

Implements: AfterViewInit

Type: Partial<MasterDetailsLayoutOptions>

Layout options to be applied.

Type: string

Layout settings is the state of the master details that could be persisted. Setting a layoutSettingsID will save the current state (details area visibilkity and split area sizes etc.) to the local storage. If the component is created, it will load those settings and re-apply them.

Type: boolean

Default Value: false

Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])

Type: number | undefined

Default Value: undefined

Size of the gutter in Pixel.

Type: \{ [key: string]: string \} | undefined

Default Value: undefined

Styles tp be applied to the panels

Type: boolean

Default Value: false

Type: boolean

Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])

Type: unknown

Default Value: contentChild.required<TemplateRef<any>>('yuvDetailsPane')

Type: unknown

Default Value: viewChild.required<TemplateRef<any>>('tplDetailsPanel')

Type: unknown

Default Value: contentChild.required<TemplateRef<any>>('yuvMasterPane')

Type: unknown

Default Value: this.#device.smallScreenLayout

onPopIn(): void