glint-composite-list

Shows items as a list. Each row in the list can be expanded to edit the item.

<glint-composite-list label="Fields"
                      description="Some description."
                      [(value)]="model.fields"
                      [createNew]="createField()"
                      addMessage="Add a new Field">
  <ng-template glint-list-item-title let-field>
    <div>{{ field.name }}: {{ field.type?.name }}</div>
  </ng-template>
  <ng-template glint-list-item-description let-field>
    {{ field.description }}
  </ng-template>
  <ng-template glint-list-item-form let-form let-field="model" let-submit="submit">
    <app-field-form [model]="field" [form]="form" [submit]="submit"/>
  </ng-template>
</glint-composite-list>

• [(value)]: Value binding expects an array of objects.
• [createNew] (optional): Function that create a new item. If defined, a button will appear at the end of the list to add a new item.
• [addMessage] (optional): Message as label for the create button.
• [glint-list-item-title] (required): Template for the item label.
• [glint-list-item-description] (optional): Template that adds additional information.
• [glint-list-item-form] (required): Template for the item form that is shown when an item is expanded.
  • let-form: template parameter containing the FormGroup instance of the item.
  • let-x="model": the item model itself.
  • let-x="submit": Observable<void> that triggers when the form is submitted.