Rendering components by type - view-a-LOD/Valeros GitHub Wiki

By default, a table view (components/node/node-render-components/node-table-view) is rendered for each node in the search results.

Some nodes, however, might benefit from creating a custom render component based on their type.

As an example, for a node with the sdo:Photograph type, you might want to showcase the photograph image in a way that does not fit the basic table structure. Alternatively, you might want to execute custom SPARQL queries for some nodes based on their type, and render the results in a certain manner.

To create a custom render component based on a node's type:

1. Create your custom render component. From the CLI: ng g c components/custom-render-components/by-type/sdo-photograph.
2. Make sure the component inherits from TypeRenderComponent:

export class SdoPhotographComponent extends TypeRenderComponent

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

renderComponents: {  
  [RenderMode.ByType]: [
	{
		component: SdoPhotographComponent,
		predicates: ['https://schema.org/Photograph', ...],
	},
  ]
}

4. Implement your custom logic in the newly created component. The node data is automatically passed in the data prop, and can be used directly in your component:

<pre>{{ data?.node | json }}</pre>