In this tutorial ,I will show you how to pull data from backend periodically to keep your UI up to date. In this tutorial I will mainly focus on observable which is imported from rxjs/Rx. In this tutorial I will use to-do application which is created previously for displaying new task,add new task,update task and delete task. You can find more about it here. In this tutorial I am using the same project which is available to git hub .
see what will be the outcome at the end of tutorial.
So first starting with creating addtask.component ,
In Above code I had used template driven approach and using two way data binding adding new task to database. For more about add ,update and delete task use the above given link.
Here in above code I had created one method named as refreshdata, which will cal service getAllTask which will fetch allTask from database and on success of this method I had given response/data to allTask Array and after that also called another method subscribeToData ,which sets the timer of 5 seconds and then again calls refreshdata, so in this way we can pull the data from the database.
Also Don’t forget to unsubscribe from subscribeToData on ngOnDestroy ,to prevent memory leakage issue.
- Two screen one displaying record and one is for add new task.
- First screen still not received an update and second screen added the record and navigated back to all task so it get the updates.
- And finally both screen get the record.(timer called after 5 seconds)
In this tutorial I had covered how to fetch data periodically from database to keep UI updated.
Find the source code here and feel free to play with code yourself.
I hope it will be helpful to you, Thanks for reading!!