Skip to main content

glint-detail-view

The glint-detail-view component dynamically renders a detail view for a given model. It automatically identifies and displays the appropriate DetailComponent based on the model's type. When the selection input changes, glint-detail-view finds and renders the corresponding component for the new model.

To use glint-detail-view, bind your model to its selection input:

<glint-detail-view [selection]="model"></glint-detail-view>

Properties​

  • [selection]: The model object to be displayed in the detail view.

Providing Detail Components​

For glint-detail-view to function, you must provide DetailComponents. These components define how different types of models are rendered. There are two primary ways to provide them:

Via @Component Providers​

You can directly provide DetailComponents within the providers array of an Angular @Component decorator. This method is suitable when you want to define detail components locally for a specific component.

@Component({
  //...
  providers: [
    {
      provide: DETAIL_COMPONENT, // This token identifies the detail components
      multi: true,               // Allows multiple components to be provided
      useValue: [
        {
          _type: 'elements::DataElement::model', // Matches a specific model type
          component: DataElementDetailComponent  // The component to render for this type
        },
        {
          _type: 'elements::DataElement::new',
          component: DataElementCreateDetailComponent
        }
      ]
    }
  ]
})

For most use cases, especially when building micro-radiant plugins, it's recommended to configure DetailComponents within an ExtensionModule. This approach promotes better organization and reusability of your detail views.

@NgModule({
  imports: [
    ExtensionModule.forExtension({
      detailComponents: [
        {
          type: 'elements::DataElement', // The base type of the model
          mode: 'edit',                  // Target mode (`edit` or `add`).
          component: DataElementDetailComponent // The component for editing DataElement
        },
        {
          type: 'elements::DataElement',
          mode: 'add',
          component: DataElementCreateDetailComponent // The component for adding a new DataElement
        }
      ]
    })
  ]
})
export class MyExtensionModule {}