Documentation
FRONTEND
<aoc-master-detail> #
This component allows for creating split layouts and communicating a model between them.
That is, it is used to divide a view into two (either vertically or horizontally) and communicate data between them,
such as allowing the detail part to receive the model selected in the master part on click.
Internally, it uses the angular-split library.
Inputs #
| Name | Type | Description |
|---|---|---|
| masterModelConfig | AocModelConfig | The master model-config instance that will be used internally |
| masterModelEmitter | AocModelEmitter | The master model emitter to which it will subscribe internally |
| detailWidthPercent | number | Width of the detail, default 30% |
Outputs #
| Name | Type | Description |
|---|---|---|
| modelChange | T | null | Emits the model change |
Example #
In this example, we split the Customers panel with a vertical separator; on the left, we have the customer grid (master) and on the right, we have the detail of the selected customer (aocDetail), with 3 tabs (tabName).
...typescript
<aoc-master-detail [masterModelConfig]="modelConfig" [masterModelEmitter]="emitter" [detailWidthPercent]="45">
Complete example at quest-client/src/app/features/schemas/customers/customer/customer-panel.component.ts
Api #
Full definition in the API.
Please note, browse Issues and Discussions in Github for more information