Knora ui module: search


66810.0.12 years ago3 years agoMinified + gzip package size for @knora/search in KB


Knora-ui search module

npm (scoped)

This module is part of Knora-ui modules, developed by the team at the Data and Service Center for Humanities DaSCH.

Search module allows to make simple searches or extended searches in Knora. In extended search, resource class and its properties related to one specific ontology are selected to create your query.


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

For existing apps, follow these steps to begin using Knora-ui search.


You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.


$ yarn add @knora/search


$ npm install --save @knora/search


This module has the following package dependencies, which you also have to install.

Required version of Knora: 12.0.0


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

Search panel

Fully customizable panel. You can set the following parameters in kui-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 one of them
  • advanced: boolean; additional menu with advanced / extended 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)

<kui-fulltext-search [route]="/search-results"></kui-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

Extended / advanced search

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

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

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


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

import { AppComponent } from './app.component';
import { KuiSearchModule } from '@knora/search';

    declarations: [
    imports: [
    providers: [ ],
    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/@knora/search/assets/style/search.scss" // <- add this line

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.