Create custom operator for live search

Author: rubenperegrina

src/app/app.component.ts

@@ -1,32 +1,29 @@
 import { Component } from '@angular/core';
+import { Observable, Subject, switchMap } from 'rxjs';
+import { liveSearchOperator } from './live-search-operator';
 
 @Component({
   selector: 'app-root',
-  template: `
-    <!--The content below is only a placeholder and can be replaced.-->
-    <div style="text-align:center" class="content">
-      <h1>
-        Welcome to {{title}}!
-      </h1>
-      <span style="display: block">{{ title }} app is running!</span>
-      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-    </div>
-    <h2>Here are some links to help you start: </h2>
-    <ul>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-      </li>
-    </ul>
-    <router-outlet></router-outlet>
-  `,
+  template: ``,
   styles: []
 })
 export class AppComponent {
-  title = 'rxjs-custom-operator';
+  searchTerm$ = new Subject<string>();
+  user$!: Observable<any>;
+
+  constructor() {
+    this.user$ = this.searchTerm$.pipe(
+      liveSearchOperator(
+        (term: string) => term.length >= 4,
+        500,
+        (prev, curr) => prev === curr
+      ),
+      //switchMap((term: string) => this.yourService.filterUser(term))
+    );
+  }
+
+  search(event: Event): void {
+    const element = event.currentTarget as HTMLInputElement;
+    this.searchTerm$.next(element.value);
+  }
 }

src/app/live-search-operator.ts

@@ -0,0 +1,15 @@
+import { OperatorFunction, debounceTime, distinctUntilChanged, Observable, filter } from 'rxjs';
+const DEFAULT_FILTER = 3;
+const DEFAULT_DEBOUNCE_TIME = 300;
+
+export function liveSearchOperator<T>(
+    filterFn: (value: T) => boolean,
+    debounceTimeFn: number,
+    distinctFn: (value: T, otherValue: T) => boolean): OperatorFunction<T, T> {
+    return (source: Observable<T>) =>
+        source.pipe(
+            filter(filterFn || DEFAULT_FILTER),
+            debounceTime(debounceTimeFn || DEFAULT_DEBOUNCE_TIME),
+            distinctUntilChanged(distinctFn)
+        );
+}