Here is the functionality to load, add, and mark ToDo as Finished:
todos: FirebaseListObservable<any>;
ngOnInit(){
this.todos = this._af.database.list('todos')
}
addTodo(newTodo: string){
this.todos.push({
todo: newTodo
} )
}
finishedTodo(key: string, finished: boolean, isFinished: boolean){
var snapshotFinished = this._af.database.object('todos/'+ key,{ preserveSnapshot: true})
snapshotFinished.subscribe(snapshot => {
isFinished = snapshot.val().finished;
});
if (isFinished == false || isFinished == null){
this.todos.update(key,{finished: true});
isFinished = true;
console.log(isFinished);
}
else{
this.todos.update(key,{finished: false});
isFinished = false;
console.log(isFinished);
}
}
And now let's take a look at the HTML code:
<div *ngFor="let todo of todos | async">
<span> {{todo.todo}} </span>
<button (click)="finishedTodo(todo.$key)">Finished</button>
</div>
When you click the Finished button, it toggles the finished value in Firebase. However, you may be wondering how to reflect this change in the Angular2 list.
So, my question is: when displaying the list of todos, how can I determine the finished value from within Firebase for each item in the list?