Rendering custom components for a predicate

By default, each triple's predicate and object are rendered in a table cell (components/node/node-render-components/node-table-view/node-table/node-table-cell) as links or literals (components/node/node-link).

Sometimes, however, you might want to render objects differently based on the corresponding predicate.

Example: from bytes to human readable string

As an example, for the mdto:omvang predicate, data is originally stored as a byte string (e.g., "5799618"), which we might want to convert into a human readable format before rendering (e.g., "5.8 MB").

Tip

This basic example is included out-of-the-box in the project, see components/node/node-render-components/predicate-render-components/mdto-omvang for implementation details.

To create a custom render component for a given predicate:

1. Add an entry to the renderComponents/[RenderMode.ByPredicate] field in config/settings.ts:

renderComponents: {  
  [RenderMode.ByPredicate]: {  
	'http://www.nationaalarchief.nl/mdto#omvang': { componentId: 'mdto-omvang' }
  }
}

2. Create a matching Angular component. From the CLI: ng g c components/node/node-render-components/predicate-render-components/mdto-omvang.
3. Add the component to components/node/node-render-components/node-table-view/node-table/node-table-cell/node-table-cell.component.html:

<app-mdto-omvang  
  *ngIf="shouldRenderComponentIds.includes('mdto-omvang')"  
/>

4. To pass the original object value to the custom component, first create an input property in the newly created component (e.g., components/node/node-render-components/predicate-render-components/mdto-omvang/mdto-omvang.component.ts).

export class MdtoOmvangComponent implements OnInit {  
  @Input() bytesStr?: string;
  ...

5. Next, pass the original value (available in the component as objValue) from the table cell to the custom component.

<app-mdto-omvang  
  *ngIf="shouldRenderComponentIds.includes('mdto-omvang')"  
  [bytesStr]="objValue"  
/>

6. Implement your custom logic in the newly created component.

Example: Conditional rendering based on SPARQL request results

In MDTO, the mdto:URLBestand predicate might refer to different file types that need to be rendered differently.

For an example of a custom render component that first executes a SPARQL request and then renders data conditionally based on the retrieved file format, see components/node/node-render-components/predicate-render-components/mdto-url-bestand.

<app-node-images [imageUrls]="[fileUrl]" *ngIf="fileUrl && isImage" />  
<app-node-link [url]="fileUrl" *ngIf="!isImage" />