Skip to content


DspSearchModule allows to make simple searches or advanced searches in DSP-API. In advanced search, resource class and its properties related to one specific ontology are selected to create your query. It is also possible to write Gravsearch queries to target specific data with the expert search form.


For help getting started with a new Angular app, check out the Angular CLI.

For existing apps, follow these steps to begin using DSP-UI SEARCH.


DspSearchModule is part of @dasch-swiss/dsp-ui, follow the installation guide.


This module contains various components to search. The main component is the dsp-search-panel, which contains the dsp-fulltext-search, dsp-advanced-search and dsp-expert-search. All of them can be used individually or in combination in dsp-search-panel.

Search panel

Fully customizable panel. You can set the following parameters in dsp-search-panel:

  • route: string; url-route for search results
  • filterbyproject: string; project iri to limit search results by project
  • projectfilter: boolean; selection of all projects to filter by
  • advanced: boolean; additional menu with advanced search
  • expert: boolean; additional menu with expert search / gravsearch "editor"

If everything is set to false or undefined the search-panel is a simple full-text search. Read more

Full-text search (Deprecated)

<dsp-fulltext-search [route]="/search-results"></dsp-fulltext-search>

The parameter route defines the route where the search-results-component of the app is defined.

We suggest to define a route for the search-results in the app.routing

        path: 'search',
        component: SearchComponent,         // --> Component with the search panel
        children: [
                path: ':mode/:q/:project',
                component: SearchResultsComponent       // --> search results, in case of paramter filterByProject and/or projectFilter
                path: ':mode/:q',
                component: SearchResultsComponent

Generic search filter tool to limit search results to ontology and resource class and / or properties.

If you want to use this search, you have to add the following css style to your main app stylesheet to style the date picker properly.

.mat-datepicker-content {
  .mat-calendar {
    height: auto !important;

Expert search is a textarea input field in which you can create Gravsearch queries. The expert search can be more powerful than the advanced search, but requires knowing how to use the query language Gravsearch (based on SparQL and developed by the DaSCH team). With Gravsearch, expert users can build searches by combining text-related criteria with any other criteria.

Check the Gravsearch learning guide on DSP-API documentation.


Import the search module in your app.module.ts and add it to the NgModules's imports:

import { AppComponent } from './app.component';
import { DspCoreModule, DspSearchModule } from '@dasch-swiss/dsp-ui';

    declarations: [
    imports: [
        DspCoreModule, // <- core module is required for some components and directives
        DspSearchModule // <- add search module in the imports
    providers:  [ ... ]    // <-- add providers as mentioned in the installation guide
    bootstrap: [AppComponent]
export class AppModule {

The search components need a global styling in the app to override some material styling rules. Please update your angular.json file as follow:

    "styles": [
        "node_modules/@dasch-swiss/dsp-ui/search/assets/style/search.scss" // <- add this line

Last update: 2021-08-13