switch filter to Subject from BehaviorSubject

src/app/list-toggle/list-toggle.component.html

@@ -1,4 +1,4 @@
-<mat-button-toggle-group class="tui-button-toggle" name="fontStyle" aria-label="Font Style">
+<mat-button-toggle-group class="tui-button-toggle" name="fontStyle" aria-label="Font Style" value="folders">
     <mat-button-toggle value="folders" (click)="onSelect(listType.Folder)">Folders</mat-button-toggle>
     <mat-button-toggle value="devices" (click)="onSelect(listType.Device)">Devices</mat-button-toggle>
 </mat-button-toggle-group>

src/app/lists/device-list/device-list.component.html

@@ -1,6 +1,6 @@
 <mat-form-field>
   <mat-label>Filter</mat-label>
-  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date" value="{{filterValue}}">
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date">
 </mat-form-field>
 <table mat-table class="full-width-table" matSort aria-label="Elements">
   <!-- Id Column -->

src/app/lists/device-list/device-list.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
@@ -7,18 +7,19 @@ import Device from '../../device';
 import { SystemConfigService } from '../../services/system-config.service';
 import { FilterService } from 'src/app/services/filter.service';
 import { StType } from 'src/app/type';
+import { MatInput } from '@angular/material/input';
 
 @Component({
   selector: 'app-device-list',
   templateUrl: './device-list.component.html',
   styleUrls: ['./device-list.component.scss']
 })
-export class DeviceListComponent implements AfterViewInit, OnInit {
+export class DeviceListComponent implements AfterViewInit, OnInit, OnDestroy {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatTable) table: MatTable<Device>;
+  @ViewChild(MatInput) input: MatInput;
   dataSource: MatTableDataSource<Device>;
-  filterValue: string = "";
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'name', 'state'];
@@ -53,8 +54,11 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
     this.table.dataSource = this.dataSource;
 
     const changeText = (text: string) => {
+      if (!text)
+        return;
+
       this.dataSource.filter = text.trim().toLowerCase();
-      this.filterValue = text;
+      this.input.value = text;
       this.cdr.detectChanges();
     }
 
@@ -62,11 +66,14 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
     changeText(this.filterService.previousInputs.get(StType.Device));
 
     // Listen for filter changes from other components
-    this.filterService.filterChanged$.subscribe(
-      input => {
-        if (input.type === StType.Device) {
-          changeText(input.text);
-        }
-      });
+    this.filterService.filterChanged$
+      .subscribe(
+        input => {
+          if (input.type === StType.Device) {
+            changeText(input.text);
+          }
+        });
   }
+
+  ngOnDestroy() { }
 }

src/app/lists/folder-list/folder-list.component.html

@@ -1,6 +1,6 @@
 <mat-form-field>
     <mat-label>Filter</mat-label>
-    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date" value="{{filterValue}}">
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date">
 </mat-form-field>
 <table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->

src/app/lists/folder-list/folder-list.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
@@ -7,18 +7,19 @@ import Folder from '../../folder';
 import { SystemConfigService } from '../../services/system-config.service';
 import { FilterService } from 'src/app/services/filter.service';
 import { StType } from 'src/app/type';
+import { MatInput } from '@angular/material/input';
 
 @Component({
   selector: 'app-folder-list',
   templateUrl: './folder-list.component.html',
   styleUrls: ['./folder-list.component.scss']
 })
-export class FolderListComponent implements AfterViewInit, OnInit {
+export class FolderListComponent implements AfterViewInit, OnInit, OnDestroy {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatTable) table: MatTable<Folder>;
+  @ViewChild(MatInput) input: MatInput;
   dataSource: MatTableDataSource<Folder>;
-  filterValue: string = "";
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'label', 'path', 'state'];
@@ -53,8 +54,11 @@ export class FolderListComponent implements AfterViewInit, OnInit {
     this.table.dataSource = this.dataSource;
 
     const changeText = (text: string) => {
+      if (!text)
+        return;
+
       this.dataSource.filter = text.trim().toLowerCase();
-      this.filterValue = text;
+      this.input.value = text;
       this.cdr.detectChanges();
     }
 
@@ -70,4 +74,6 @@ export class FolderListComponent implements AfterViewInit, OnInit {
           }
         });
   }
+
+  ngOnDestroy() { }
 }

src/app/services/filter.service.ts

@@ -1,29 +1,26 @@
 import { Injectable } from '@angular/core';
 import { StType } from '../type';
-import { BehaviorSubject } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
+import { Subject } from 'rxjs';
 
 export interface FilterInput {
   type: StType;
   text: string
 }
 
+@Injectable({
+  providedIn: 'root'
+})
 export class FilterService {
   previousInputs = new Map<StType, string>(
     [
       [StType.Folder, ""],
       [StType.Device, ""],
     ]
-
   )
 
   constructor() { }
 
-  private filterChangeSource = new BehaviorSubject<FilterInput>({ type: StType.Folder, text: "" });
-
+  private filterChangeSource = new Subject<FilterInput>();
   filterChanged$ = this.filterChangeSource.asObservable();
 
   changeFilter(input: FilterInput) {