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.

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

Now we are going to add search as well.

Approach

First fork the Stackblitz Demo from this article.

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

--

--

--

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

https://youtu.be/JmGMzyajA2U

Voice Account Linking for Google Actions in Jovo

Powerful Code Blocks With Code Hike and MDX

The Future of Functional React Components with React Hooks

How to Refactor your JavaScript code replacing loops with array methods

Simple PassportJS

SPG Development

10 Best Android Frameworks for App Development in 2020

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Firefly Semantics Slice Entity Store Active API Guide

HOW TO IMPLEMENT ANIMATE ON SCROLL IN ANGULAR WEB APPS — USING THE AOS LIBRARY

How to load Spotify Web Playback SDK inside an Angular App?

BazaIT | Made with Angular JS

BazaIT | Made with Angular JS