Angular Promises Versus Observables | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Angular Promises Versus Observables

Angular Promises Versus Observables

In this blog, we are going to see what observables are and how they are superior to promises with the help of Syncfusion’s Angular Charts component. Both observables and promises help us work with asynchronous functionality in JavaScript. Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time.

Syncfusion Angular component suite is the only suite you will ever need to develop an Angular application faster.

Angular Promises vs. Observables

Let’s see the difference between observable and promise (observable vs promise).

ObservablesPromises
Emit multiple values over a period of time.Emit a single value at a time.
Are lazy: they’re not executed until we subscribe to them using the subscribe() method.Are not lazy: execute immediately after creation.
Have subscriptions that are cancellable using the unsubscribe() method, which stops the listener from receiving further values.Are not cancellable.
Provide the map for forEach, filter, reduce, retry, and retryWhen operators.Don’t provide any operations.
Deliver errors to the subscribers.Push errors to the child promises.

Now let’s see code snippets/examples of a few operations defined by observables and promises.

OperationsObservablesPromises
Creation
const obs = new Observable((observer) => {

observer.next(10);

}) ;
const promise = new Promise(() => {

resolve(10);

});
Transform
Obs.pipe(map(value) => value * 2);
promise.then((value) => value * 2);
Subscribe
const sub = obs.subscribe((value) => {

console.log(value)

});
promise.then((value) => {

console.log(value)

});
Unsubscribe
sub.unsubscribe();
Can’t unsubscribe

With this information, we have some idea about what observables and promises are, how they’re initialized, etc. Now let’s see the practical usage of them with the help of the Syncfusion Charts component. If you’re looking for stunning charts for your Angular application, you can check out the Syncfusion’s Angular Charts component, which provides you with a variety of impressive features. To get started with the Syncfusion Charts component, please see the blog How to Create Beautiful Charts in Angular.

Let’s see how to load data to the Syncfusion Charts component with the help of promises and observables. First, I am going to use a promise to load the initial data to a chart and then an observable to update it with dynamic data.

Be amazed exploring what kind of application you can develop using Syncfusion Angular components.

Populating the chart with data using promises

First, I am going to populate the chart with some data from services. For that, initialize the chart with a series and create a service for the data.

` <e-series-collection>
      <e-series> </e-series>
  </e-series-collection>`

export class AppComponent  {

  public chartData: Data[];
  constructor(private dataService: DataService) { 

  }

}

Now get the data from dataService with the help of a promise and assign it to the chart dataSource.

` <e-series-collection>
      <e-series [dataSource]='chartData' type='Spline' xName='year' yName='sales'> </e-series>
  </e-series-collection>`

export class AppComponent  {

  public chartData: Data[];
  constructor(private dataService: DataService) { 

  }
  new Promise((resolve, reject) => 
                   {
                    resolve(this.dataService.getData())
                   }
              ).then((value : Data[]) => 
                    this.chartData = value
              ).catch((err) => 
                     this.chartData = null
              );   
}

Data emitted by the promise is visualized in a Syncfusion chart in the following screenshot.

Data emitted by the promise is visualized - Promise in Angular

Dynamically updating chart data using observables

With this, a chart was rendered with some initial data. Let’s assume that the service is updating its data every 1000ms. Then, we must get the data from the service every 1000ms and assign it to the chart using observables.

 this.Obs = new Observable((observer) => {
              observer.next(this.dataService.getData(true));
              setInterval(() => {
                observer.next(this.dataService.getData(false));
               }, 1000)
 });

Now, you can see the chart is being updated with the live data from the service.

Updating live data on the chart using observables

GitHub References

For more details, refer to the difference between Angular Promises Vs. Observables on Stackblitz.

Harness the power of Syncfusion’s feature-rich and powerful Angular UI components.

Conclusion

In this blog, we learned about the difference between promise and observable (promise vs observable) in Angular with the help of the Syncfusion Charts component. To learn more about the Syncfusion Charts component for Angular, take a look at the documentation to explore all its features and API.

The Syncfusion Angular UI Components library offers a comprehensive suite for building applications, featuring a wide range of high-performance, lightweight, modular, and responsive UI components in a single package. Download our free trial from our website. You can also explore our online angular demos.

If you have any questions about these controls, please let us know in the comments below. You can also contact us through our support forum, support portal, or feedback portal. We are happy to assist you!

Recommended resources

Tags:

Share this post:

Comments (7)

Thanks for the detailed information

great article!..thanks.

Lovely explanation

Thanks for this article!

thanks for this article, its great

Simple !! Understandable !! Great clarty !! Thanks a lot !!

The code examples in this article need correction. For example see ‘Create Promise’ code example. It shows

=>

instead of

=>

which could be confusing to anyone who doesn’t realize this is an HTML conversion problem.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top