Adding Search To the Firefly Semantics Slice Angular Todo Application

Image by Walter Frehner from Pixabay

Scenario

In this article we implemented an Angular Todo application.

Creating a Reactive Todo Application With the Firefly Semantics Slice State Manager

And the backbone of it was the Firefly Semantics Slice Reactive State Manager.

@fireflysemantics/slice

Now we are going to add search as well.

Approach

First fork the Stackblitz Demo from this article.

Creating a Reactive Todo Application With the Firefly Semantics Slice State Manager

Dependencies Update

Add lunr and @types/lunr to the dependencies.

Search Component

Add search.component.ts to the app/components folder.

This component listens to keyup events on the input field and emits the query value via the StateService ‘s onSearch function.

Also register the component in the declarations section of app.module.ts .

State Service Update

Within the services/state.service.ts file import lunr .

import lunr from 'lunr';

In the constructor initialize the todoStore query .

//============================================
// Set the todoStore.query to something
// so the obervable fires at least once.
//============================================
this.todoStore.query = '';

Also updated the expression that creates the selectedTodos$ observable so that the expression includes the todoStore query observable.

We also need to update the applyFilter function to apply the query from the todoStore if the user has entered a query value into the input field.

In order or to be able to search through the entered Todo instances we index them with lunr :

Note that in the callback function to lunr we call this.ref('gid') to let lunr know that each Todo instance should be identified by the gid value.

We also implement a search function to use the created index:

Lastly add an onSearch function that we will bind in. our search.component.ts to receive the search queries on keyup events.

onSearch(query: string) {
    this.todoStore.query = query;
}

Update the Application

Now that that’s all done we can update the application.component.html with <app-search-todo></app-search-todo> .

It should look like this:

<div style="margin: 2rem;">
<app-add-todo></app-add-todo>
<app-search-todo></app-search-todo>
<app-todos-filter></app-todos-filter>
<app-todos></app-todos>
<div *ngIf="s.finito$ | async">Finito!</div>
</div>

And that’s it. We can now both filter and search within the filter of the app.

Demo