When a Todo property updates, you still must create a new Array of Todos and assign a new reference. This lesson walks you through refactoring from the current approach to the immutable approach.
TodoItemRender.ts:
import {Component, Input, ViewEncapsulation, EventEmitter, Output} from 'angular2/core';
@Component({
selector: 'todo-item-renderer',
// encapsulation:ViewEncapsulation.Emulated, //Default, (parent style pass )in and no (child style go) out
// encapsulation:ViewEncapsulation.Native, // no in and no out
encapsulation:ViewEncapsulation.None, // in and out
template: `
<style>
.completed{
text-decoration: line-through;
}
</style>
<div>
<span [ngClass]="todo.status"
[contentEditable]="todo.isEdit">{{todo.title}}</span>
<button (click)="toggleTodo.emit(todo)">Toggle</button>
<button (click)="todo.edit()">Edit</button>
</div>
`
})
export class TodoItemRenderer{
@Input() todo;
@Output() toggleTodo = new EventEmitter();
}
Here we use EventEmitter to emit a event called 'toggleTodo'. Parent component (TodoList.ts) will catch the event and update the TodoService's todos array.
And todos array should be a new reference.
TodoList.ts:
import {Component} from 'angular2/core';
import {TodoService} from './TodoService';
import {TodoItemRenderer} from './TodoItemRenderer';
import {StartedPipe} from './started-pipe';
@Component({
selector: 'todo-list',
pipes: [StartedPipe],
directives: [TodoItemRenderer],
template: `
<ul>
<li *ngFor="#todo of todoService.todos | started">
<todo-item-renderer [todo]="todo"
(toggleTodo) = "todoService.toggleTodo($event)" // Contains the todoModule
></todo-item-renderer>
</li>
</ul>
`
})
export class TodoList{
constructor(public todoService: TodoService){
}
}
TodoService.ts:
import {TodoModule} from './TodoModule';
export class TodoService {
todos = [
//init some todos
new TodoModule("eat"),
new TodoModule("sleep"),
new TodoModule("code")
];
addNewTodo(todo) {
this.todos = [...this.todos, todo];
}
toggleTodo(todo) {
const i = this.todos.indexOf(todo);
todo.toggle();
this.todos = [
...this.todos.slice(0, i),
todo,
...this.todos.slice( i + 1)
];
}
}
---------------------