Rendering components by type

By default, a table view (src/app/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.

Example

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. Add an entry to the renderComponents/[RenderMode.ByType] field in src/app/config/settings.ts:

renderComponents: {  
  [RenderMode.ByType]: {  
	'https://schema.org/Photograph': { componentId: 'sdo-photograph' }
  }
}

2. Create a matching Angular component. From the CLI: ng g c components/node/node-render-components/type-render-components/sdo-photograph.
3. Make sure the component inherits from NodeRenderComponent:

export class SdoPhotographComponent extends NodeRenderComponent

4. Add the component to src/app/components/node/node-renderer/node-renderer.component.html:

<app-sdo-photograph  
  [node]="node"  
  *ngIf="renderComponentIdsToShow.includes('sdo-photograph')"  
/>

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

Tip

For a basic example of how to implement a custom render component that does a SPARQL request and renders the results as a simple list, see src/app/components/node/node-render-components/type-render-components/hua-rubriek.