fix(todos): snackbar not being translated

added translation for all snackbar messages,
on filter, toggle, added, and removed

fixes #324

src/app/examples/todos/components/todos-container.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { Store, select } from '@ngrx/store';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { select, Store } from '@ngrx/store';
+import { forkJoin, Subject } from 'rxjs';
+import { first, takeUntil } from 'rxjs/operators';
 
 import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
 
@@ -16,6 +16,7 @@ import {
 import { selectTodos } from '../todos.selectors';
 import { Todo, TodosFilter, TodosState } from '../todos.model';
 import { State } from '../../examples.state';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'anms-todos',
@@ -29,7 +30,11 @@ export class TodosContainerComponent implements OnInit, OnDestroy {
   todos: TodosState;
   newTodo = '';
 
-  constructor(public store: Store<State>, public snackBar: MatSnackBar) {}
+  constructor(
+    public store: Store<State>,
+    public snackBar: MatSnackBar,
+    public translateService: TranslateService
+  ) {}
 
   ngOnInit() {
     this.store
@@ -73,26 +78,58 @@ export class TodosContainerComponent implements OnInit, OnDestroy {
 
   onAddTodo() {
     this.store.dispatch(new ActionTodosAdd({ name: this.newTodo }));
-    this.showNotification(`"${this.newTodo}" added`);
+    this.translateService
+      .get('anms.examples.todos.added.notification', { name: this.newTodo })
+      .pipe(first())
+      .subscribe(addedMessage => {
+        this.showNotification(addedMessage);
+      });
     this.newTodo = '';
   }
 
   onToggleTodo(todo: Todo) {
-    const newStatus = todo.done ? 'active' : 'done';
     this.store.dispatch(new ActionTodosToggle({ id: todo.id }));
-    this.showNotification(`Toggled "${todo.name}" to ${newStatus}`, 'Undo')
-      .onAction()
-      .subscribe(() => this.onToggleTodo({ ...todo, done: !todo.done }));
+    const newStatus$ = this.translateService
+      .get(`anms.examples.todos.filter.${todo.done ? 'active' : 'done'}`)
+      .pipe(first());
+    const undo$ = this.translateService
+      .get('anms.examples.todos.undo')
+      .pipe(first());
+    const toggledMessage$ = this.translateService
+      .get('anms.examples.todos.toggle.notification', { name: todo.name })
+      .pipe(first());
+    forkJoin(newStatus$, undo$, toggledMessage$).subscribe(
+      ([newStatus, undo, toggledMessage]) => {
+        this.showNotification(`${toggledMessage} ${newStatus}`, undo)
+          .onAction()
+          .subscribe(() => this.onToggleTodo({ ...todo, done: !todo.done }));
+      }
+    );
   }
 
   onRemoveDoneTodos() {
     this.store.dispatch(new ActionTodosRemoveDone());
-    this.showNotification('Removed done todos');
+    this.translateService
+      .get('anms.examples.todos.remove.notification')
+      .pipe(first())
+      .subscribe(removedMessage => {
+        this.showNotification(removedMessage);
+      });
   }
 
   onFilterTodos(filter: TodosFilter) {
     this.store.dispatch(new ActionTodosFilter({ filter }));
-    this.showNotification(`Filtered to ${filter.toLowerCase()}`);
+    const filterToMessage$ = this.translateService
+      .get('anms.examples.todos.filter.notification')
+      .pipe(first());
+    const filterMessage$ = this.translateService
+      .get(`anms.examples.todos.filter.${filter.toLowerCase()}`)
+      .pipe(first());
+    forkJoin(filterToMessage$, filterMessage$).subscribe(
+      ([filterToMessage, filterMessage]) => {
+        this.showNotification(`${filterToMessage} ${filterMessage}`);
+      }
+    );
   }
 
   private showNotification(message: string, action?: string) {

src/assets/i18n/examples/de.json

@@ -23,6 +23,11 @@
   "anms.examples.todos.filter.description": "Anzeigen",
   "anms.examples.todos.filter.items": "Aufgaben",
   "anms.examples.todos.filter.item": "Aufgabe",
+  "anms.examples.todos.filter.notification": "Gefiltert nach",
+  "anms.examples.todos.remove.notification": "Erledigt aufgaben entfernt",
+  "anms.examples.todos.toggle.notification": "Umschalten von {{name}} nach",
+  "anms.examples.todos.added.notification": "{{name}} hinzugefügt",
+  "anms.examples.todos.undo": "Undo",
   "anms.examples.stocks.title": "Börse",
   "anms.examples.stocks.symbol": "Aktiensymbol",
   "anms.examples.stocks.description":

src/assets/i18n/examples/en.json

@@ -24,6 +24,11 @@
   "anms.examples.todos.filter.description": "Displaying",
   "anms.examples.todos.filter.items": "todos",
   "anms.examples.todos.filter.item": "todo",
+  "anms.examples.todos.filter.notification": "Filtered to",
+  "anms.examples.todos.remove.notification": "Removed done todos",
+  "anms.examples.todos.toggle.notification": "Toggled {{name}} to",
+  "anms.examples.todos.added.notification": "{{name}} added",
+  "anms.examples.todos.undo": "Undo",
   "anms.examples.stocks.title": "Stock market",
   "anms.examples.stocks.symbol": "Stock symbol",
   "anms.examples.stocks.description":

src/assets/i18n/examples/es.json

@@ -24,6 +24,11 @@
   "anms.examples.todos.filter.description": "Mostrando",
   "anms.examples.todos.filter.items": "recordatorios",
   "anms.examples.todos.filter.item": "recordatorio",
+  "anms.examples.todos.filter.notification": "Filtrado a",
+  "anms.examples.todos.remove.notification": "Hechos eliminados",
+  "anms.examples.todos.toggle.notification": "Alternadas de {{name}} a",
+  "anms.examples.todos.added.notification": "{{name}} agregado",
+  "anms.examples.todos.undo": "Deshacer",
   "anms.examples.stocks.title": "Mercado de valores",
   "anms.examples.stocks.symbol": "Símbolo de la acción",
   "anms.examples.stocks.description":

src/assets/i18n/examples/fr.json

@@ -25,6 +25,11 @@
   "anms.examples.todos.filter.description": "Affiche",
   "anms.examples.todos.filter.items": "tâches",
   "anms.examples.todos.filter.item": "tâche",
+  "anms.examples.todos.filter.notification": "Filtré à",
+  "anms.examples.todos.remove.notification": "Terminées tâches supprimées",
+  "anms.examples.todos.toggle.notification": "basculer {{name}} à",
+  "anms.examples.todos.added.notification": "{{name}} ajouté",
+  "anms.examples.todos.undo": "Annuler",
   "anms.examples.stocks.title": "Bourse",
   "anms.examples.stocks.symbol": "Symbole boursier",
   "anms.examples.stocks.description":

src/assets/i18n/examples/pt-br.json

@@ -23,6 +23,11 @@
   "anms.examples.todos.filter.description": "Mostrando",
   "anms.examples.todos.filter.items": "todos",
   "anms.examples.todos.filter.item": "todo",
+  "anms.examples.todos.filter.notification": "Filtrado para",
+  "anms.examples.todos.remove.notification": "Removido tudo feito",
+  "anms.examples.todos.toggle.notification": "alternou de {{name}} para",
+  "anms.examples.todos.added.notification": "{{name}} adicionado",
+  "anms.examples.todos.undo": "Desfazer",
   "anms.examples.stocks.title": "Mercado de Ações",
   "anms.examples.stocks.symbol": "Simbolo",
   "anms.examples.stocks.description":

src/assets/i18n/examples/sk.json

@@ -23,6 +23,11 @@
   "anms.examples.todos.filter.active": "Aktívne",
   "anms.examples.todos.filter.description": "Zobrazené",
   "anms.examples.todos.filter.items": "úlohy",
+  "anms.examples.todos.filter.notification": "Filtrované na",
+  "anms.examples.todos.remove.notification": "Odstránené dokončené úlohy",
+  "anms.examples.todos.toggle.notification": "prepínať medzi {{name}} a",
+  "anms.examples.todos.added.notification": "{{name}} pridané",
+  "anms.examples.todos.undo": "Aufknöpfen",
   "anms.examples.stocks.title": "Akciový trh",
   "anms.examples.stocks.symbol": "Symbol akcie",
   "anms.examples.stocks.description":