import { Component , OnInit } from '@angular/core' ; import { TodosStoreService } from '@app/features/todos/store/todos-store.service' ; import { Observable } from 'rxjs' ; import { Todo , ITodo } from '@app/shared/models/todos/todos.model' ; import { Router } from '@angular/router' ; @ Component ( { selector : 'app-todos-page' , templateUrl : './todos-page.component.html' , styleUrls : [ './todos-page.component.css' ] } ) export class TodosPageComponent implements OnInit { public todos$ : Observable < ITodo [ ] > ; constructor ( private _todosStore , private _router ) { } ngOnInit ( ) { this . todos$ = this . _todosStore . getTodos ( ) ; this . _todosStore . dispatchLoadAction ( ) ; } addTodo ( todoInput ) { this . _todosStore . dispatchCreateAction ( { description : todoInput . value } ) ; this . clearInput ( todoInput ) ; } toggleComplete ( todo ) { const updated = new Todo ( todo ) ; updated . toggleState ( ) ; this . _todosStore . dispatchUpdateAction ( updated ) ; } deleteTodo ( todo ) { this . _todosStore . dispatchRemoveAction ( todo . _id ) ; } clearInput ( todoInput ) { todoInput . value = '' ; } navToEdit ( todo ) { console . log ( 'go edit ' , todo . _id ) ; this . _router . navigate ( [ `todos/${ todo . _id }` ] ) ; } }