I'm exploring the possibility of utilizing combineLatest in an Angular service to eliminate the need for the activeFiler$ switch block (The service should achieve the same functionality). Currently, this is the structure of the component design (stackblitz link), and I aim to retain only the render$ observable:
export class TodosComponent implements OnInit {
constructor(private ts:TodoService) {}
render$: Observable<Todo[]>;
activeFilter$: Observable<VISIBILITY_FILTER>;
ngOnInit() {
this.render$ = this.ts.selectedTodos$;
this.activeFilter$ = this.ts.activeFilter$;
this.activeFilter$.subscribe(active=>{
switch (active) {
case VISIBILITY_FILTER.SHOW_COMPLETED:
this.render$ = this.ts.completeTodos$;
break;
case VISIBILITY_FILTER.SHOW_ACTIVE:
this.render$ = this.ts.incompleteTodos$;
break;
default:
this.render$ = this.ts.todos$;
}
});
}
}
}
As can be seen, I have set up this.render$ with an Observable obtained from the todo.service.ts file. The method is as follows:
this.selectedTodos$ =
combineLatest(this.activeFilter$, this.completeTodos$, this.incompleteTodos$, this.todos$, this.applyFilter);
private applyFilter(filter, completeTodos, incompleteTodos, todos): Todo[] {
switch (filter) {
case VISIBILITY_FILTER.SHOW_COMPLETED:
return completeTodos;
case VISIBILITY_FILTER.SHOW_ACTIVE:
return incompleteTodos;
default:
return todos;
}
}
Given this setup, I believe I can do away with the
this.ts.ostore.observe(ACTIVE_FILTER_KEY).subscribe(active=>{An interesting observation is that if I comment out the $activeFilter subscription and log this:
this.render$ = this.ts.selectedTodos$;
this.render$.subscribe(v=>console.log(v));
Although newly added todos are logged, they are not rendering. Any insights on this issue?