The AOC Framework

Documentation

| Read in English Leer en Español

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).

  <aoc-master-detail [masterModelConfig]="modelConfig" [masterModelEmitter]="emitter" [detailWidthPercent]="45">
    <ng-template aocMaster>
      <app-customer-grid [emitter]="emitter"></app-customer-grid>
    </ng-template>
    <ng-template aocDetail tabName="Invoices">
      <app-invoice-grid [listener]="invoiceListener"></app-invoice-grid>
    </ng-template>
    <ng-template aocDetail tabName="Delivery notes">
      <app-delivery-note-grid [listener]="deliveryNoteListener"></app-delivery-note-grid>
    </ng-template>
    <ng-template aocDetail tabName="Budgets">
      <app-budget-grid [listener]="budgetListener"></app-budget-grid>
    </ng-template>
  </aoc-master-detail>

Complete example at quest-client/src/app/features/schemas/customers/customer/customer-panel.component.ts