I have updated your stackblitz with solution. Here is what you need to do.
In main.service.ts,
Keep a reference of todos within the service itself for future updates. See below.
private allTodos: Todo[];
getTodo() {
if(!this.allTodos$){
this.allTodos$ = <BehaviorSubject<Todo[]>>new BehaviorSubject(new Array<Todo>());
this.http
.get<Todo[]>(
'https://jsonplaceholder.typicode.com/todos'
).subscribe(
(data: Todo[]) => {
this.allTodos = data;
this.allTodos$.next(data);
}
),
error => console.log(error);
}
}
Return the BehaviourSubject directly from subscribetoTodos method. Subjects can be subscribed directly.
subscribetoTodos(): Observable<Todo[]>{
return this.allTodos$;
}
update 'updateToDo' method as below. Notice how I am updating one reference of Todo in the list here and sending it to subscribers via next.
updateTodo(id){
this.http.patch('https://jsonplaceholder.typicode.com/todos/' + id , { 'completed': true })
.subscribe(
data => {
this.allTodos.find(todo => {
if (todo.id === id) {
Object.assign(todo, data);
return true;
}
return false;
});
console.log(data);
this.allTodos$.next(Object.assign([], this.allTodos));
},
error => console.log(error)
)
}
This will update your view.
In case of paginated data, change the subscription to the below.
ngOnInit() {
this.todos$ = this.mainService.subscribetoTodos();
this.todos$.subscribe(
(data)=>{
this.page = this.page || 1;
this.pageSize = 10;
}
)
}
Notice how I am checking if this.page exist, then use that, else go to page 1.
this.page = this.page || 1;
Earlier it was,
this.page = 1;
which was resetting the page back to 1 whenever any update happened.
