fix(tomastrajan#524): class active on Todos filter not showing up

Author: Benjamin Hahn

projects/angular-ngrx-material-starter/src/app/features/examples/todos/components/todos-container.component.html

@@ -23,19 +23,19 @@ <h2 class="dotos-title" rtl>
             <fa-icon icon="filter"></fa-icon>
           </button>
           <mat-menu class="todos-filter-menu-overlay" #todosFilter="matMenu" xPosition="before">
-            <button mat-menu-item (click)="onFilterTodos('ALL')" [ngClass]="{ active: todos.filter === 'ALL' }" rtl>
+            <button mat-menu-item (click)="onFilterTodos('ALL')" [class.active]="(filter$ | async) === 'ALL'" rtl>
               <mat-icon>
                 <fa-icon icon="tasks"></fa-icon>
               </mat-icon>
               <span>{{ 'anms.examples.todos.filter.all' | translate }}</span>
             </button>
-            <button mat-menu-item (click)="onFilterTodos('DONE')" [ngClass]="{ active: todos.filter === 'DONE' }">
+            <button mat-menu-item (click)="onFilterTodos('DONE')" [class.active]="(filter$ | async) === 'DONE'">
               <mat-icon>
                 <fa-icon icon="check"></fa-icon>
               </mat-icon>
               <span>{{ 'anms.examples.todos.filter.done' | translate }}</span>
             </button>
-            <button mat-menu-item (click)="onFilterTodos('ACTIVE')" [ngClass]="{ active: todos.filter === 'ACTIVE' }">
+            <button mat-menu-item (click)="onFilterTodos('ACTIVE')" [class.active]="(filter$ | async) === 'ACTIVE'">
               <mat-icon>
                 <fa-icon icon="square"></fa-icon>
               </mat-icon>

projects/angular-ngrx-material-starter/src/app/features/examples/todos/components/todos-container.component.ts

@@ -1,3 +1,4 @@
+import { selectTodosFilter } from './../todos.selectors';
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -23,6 +24,7 @@ import { Todo, TodosFilter } from '../todos.model';
 export class TodosContainerComponent implements OnInit {
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
   todos$: Observable<Todo[]>;
+  filter$: Observable<TodosFilter>;
   removeDoneDisabled$: Observable<boolean>;
   newTodo = '';
 
@@ -35,6 +37,7 @@ export class TodosContainerComponent implements OnInit {
 
   ngOnInit() {
     this.todos$ = this.store.pipe(select(selectTodos));
+    this.filter$ = this.store.pipe(select(selectTodosFilter));
     this.removeDoneDisabled$ = this.store.pipe(
       select(selectRemoveDoneTodosDisabled)
     );