Skip to main content

glint-detail-link-list

The glint-detail-link-list component is designed to help users create new instances of abstract element types. It presents a list of links, each representing a concrete sub-type, allowing the user to select the desired type for creation.

Here's how to use it:

<glint-detail-link-list
  type="elements::Component::valueTypes"
  [selection]="selection"
  cols="2">
</glint-detail-link-list>

Properties​

  • type: This string property acts as a selector for the detail links to be displayed. It should refer to the relevant property on your metamodel that defines the target element types.
  • [selection]: An instance of CreateModelTask. This object represents the user's request to create a new element and carries information about the creation process.
  • [cols]: This string property dictates how many detail link cards will be displayed side-by-side. Valid values are '1', '2', '3', or '4'. The default value is '4'.

You can provide the detail links that glint-detail-link-list displays using two primary methods:

Via @Component providers​

You can directly provide detail links within the providers array of your Angular @Component decorator. This is suitable for component-specific links.

@Component({
  providers: [
    {
      provide: DETAIL_LINK,
      multi: true,
      useValue: [
        {
          _type: 'elements::Component::valueTypes',
          link: {
            title: 'SimpleValueType',
            reference: 'elements::SimpleValueType',
            description: 'A simple ValueType',
            icon: new VariableIcon('', {
              'material-symbols': materialSymbol('serif')
            })
          }
        }
      ]
    }
  ]
})

For more organized and reusable provision of detail links, especially within plugins, it's recommended to use an ExtensionModule.

@NgModule({
  imports: [
    ExtensionModule.forExtension({
      detailLinks: [
        {
          type: 'elements::Component::valueTypes',
          link: {
            title: 'SimpleValueType',
            reference: 'elements::SimpleValueType',
            description: 'A simple ValueType',
            icon: new VariableIcon('', {
              'material-symbols': materialSymbol('serif')
            })
          }
        }
      ]
    })
  ]
})
export class MyExtensionModule {}