Live Dashboard in angular2 using observable(pull real time data to keep ui updated)

Hello Readers,

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.

output_Qgx6cx.gif

So first starting with creating addtask.component ,

Addtasks.component.html

Addtasks.component.ts

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.

Tasks.component.html

Tasks.component.ts

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.

Output

  1. Two screen one displaying record and one is for add new task.screenshot-138
  2. First screen still not received an update and second screen added the record and navigated back to all task so it get the updates.screenshot-139_li
  3. And finally both screen get the record.(timer called after 5 seconds)Screenshot (140)_LI.jpg

 

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!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s