Filtering Angular Material Data Table with Slice

Image by Tumisu from Pixabay

Scenario

Approach

Dependencies

Entity Model

class Todo {
id: string;
gid?: string;
description: string;
completed: boolean;
}

Material Select Model

/**
* The Slice Keys
*/
enum TodoSliceEnum {
ALL = "All",
COMPLETE = "Complete",
INCOMPLETE = "Incomplete"
}
const SELECTED_SLICE_KEY = "SELECTED_SLICE_KEY";public menus: string[] =
keys(TodoSliceEnum).map(k => TodoSliceEnum[k]);

Material Select Markup

<mat-form-field><mat-label>Todo Slice</mat-label><mat-select [formControl]="select"><mat-option *ngFor="let menu of menus" [value]="menu">{{menu}}</mat-option></mat-select></mat-form-field>

Reactive Slice Selection

public ostore: OStore = new OStore();public selectedSlice$: Observable<TodoSliceEnum>;this.ostore.post(SELECTED_SLICE_KEY, TodoSliceEnum.ALL);this.selectedSlice$ = this.ostore.observe(SELECTED_SLICE_KEY);
this.select.valueChanges.
pipe(untilDestroyed(this)).
subscribe(slice=>{
this.ostore.put(SELECTED_SLICE_KEY, slice)
})

Reactive Data Source Initialization

this.dataSource = new MatTableDataSource(todos)

Reactive Entity Store Initialization

this.allTodos$ = this.todoStore.observe()this.todoStore.addSlice(todo => todo.completed, 
TodoSliceEnum.COMPLETE)
this.todoStore.addSlice(todo => !todo.completed,
TodoSliceEnum.INCOMPLETE)
this.todoStore.postA(todos)
this.completeTodos$ = this.todoStore
.getSlice(TodoSliceEnum.COMPLETE)
.observe()
this.incompleteTodos$ = this.todoStore
.getSlice(TodoSliceEnum.INCOMPLETE)
.observe()

Getting the Selected Todos

this.selectedTodos$ = combineLatest(
this.selectedSlice$,
this.completeTodos$,
this.incompleteTodos$,
this.allTodos$,
this.applyFilter
)
public applyFilter(filter, completeTodos, incompleteTodos, todos): Todo[] {
switch (filter) {
case TodoSliceEnum.COMPLETE:
return completeTodos;
case TodoSliceEnum.INCOMPLETE:
return incompleteTodos;
default:
return todos;
}
}

Demo

Founder of Firefly Semantics Corporation