Try Ignite UI for Angular<\/a><\/p>\n\n\n\n Promises in Angular<\/a> provide an easy way to execute asynchronous functions that use callbacks while emitting and completing (resolving or rejecting) one value at a time. When using an Angular Promise, you are enabled to emit a single event from the API. Then, the controller (or the directive) takes over, registering up to three callbacks\u2014success, error, and\/or notifications.<\/p>\n\n\n\n There are four states of the Angular Promise:<\/p>\n\n\n\n Something to remember is that Angular Promise is more passive compared to the Observable and cannot be canceled once it is started. In other words, when you pass the callback\u202fto the\u202fPromise\u202fconstructor (controller or directive), it will either resolve or reject the function.<\/p>\n\n\n\n Now, there are several disadvantages to the Angular Promise.<\/p>\n\n\n\n To create a promise in Angular we just need to use ‘new Promise(function)’ syntax. The promise constructor takes function as a parameter and that inner function takes resolve and reject as a params.<\/p>\n\n\n\n Let\u2019s see how this looks in the code snippet below.<\/p>\n\n\n\n Now that we know how to create an Angular Promise, we will use it to implement a very simple scenario. The created Promise will help us validate whether the number is prime or not.<\/p>\n\n\n\n And finally, to put our method in use, we will handle the Promise in the following way.<\/p>\n\n\n\n Observables provide more capabilities as they let developers run functions asynchronously and synchronously. They represent a stream of values that can handle 0, 1, or multiple events, using the same API for each. What I personally like about Angular Observables is the number of operators that simplify coding, including retry(), \u202freplay(), map,\u202fforEach,\u202freduce, and more.<\/p>\n\n\n\n Just like Angular Promises, Observables in Angular also have their disadvantages.<\/p>\n\n\n\n To create an Observable in Angular, first, it is necessary to import Observable from rxjs because, as we learned above, they are not natively supported.<\/p>\n\n\n\n To create a new Observable we just need to use its constructor and to add the logic that will be executed upon subscription. In our case we will create an Observable that will return a great data source for our Angular grid <\/a>component.<\/p>\n\n\n\n After that what is left for us is to subscribe to the created Observable and bind the received data as a data source to our Angular components<\/a>.<\/p>\n\n\n\n A great and more meaningful example of a use case for working with observables is using IgxGrid with Remote Data. As you can see in the example, only a small chunk of data is fetched initially when the component is rendered and on each scroll or data operation that is performed a new piece of the data is taken. This observable of type any[] is binded directly to the grid using async Angular pipe. The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.<\/p>\n\n\n\n Click here to see the sample<\/a> and inspect the code right away.<\/p>\n\n\n\n As we understand from the written above the most common scenario to use Observables is when we need to bind data to some component. To fetch data, we must make HTTP request using HttpClient. The best way to do it is to carry it out into a separate service. All HttpClient methods return an RxJS Observable of something. In general, an Observable can return multiple values over time but an Observable from HttpClient always emits a single value and then completes, never to emit again.<\/p>\n\n\n\n In the App Builder, binding a component to a data source is easy and intuitive. You currently have the following options to choose from in order to use one of our predefined data sources:<\/p>\n\n\n\n After that, no matter which approach you choose, you can use the Data drop-down from our props panel to bind the data to the component – for example, to the Angular grid.<\/p>\n\n\n\n Now we can look at the generated code in Angular.<\/a> We give you a separate service where the data fetching is performed using HTTP get method.<\/p>\n\n\n\n And you can see in the MasterViewComponent ts file the subscription the data service performed. With this basis, you can conduct even more complicated scenarios whenever necessary.<\/p>\n\n\n\n To present the differences between Observables and Promises in Angular, I decided to compose a table. This way you will be able to compare them in a more digestible and super concise way.<\/p>\n\n\n\n <\/p>\n\n\n\n ANGULAR OBSERVABLES<\/strong><\/p>\n<\/td> ANGULAR PROMISES<\/strong><\/p>\n<\/td><\/tr> Can handle both synchronous and asynchronous events<\/p>\n<\/td> Can only handle asynchronous data returns<\/p>\n<\/td><\/tr> Emit and complete 0, 1, or multiple values over a period of time (stream data in multiple pipeline)<\/p>\n<\/td> Only emit one value at a time (have one pipeline)<\/p>\n<\/td><\/tr> Less passive, meaning<\/p>\n<\/td> More passive, meaning<\/p>\n<\/td><\/tr> Offer operations like map, filter, reduce, retry(), or\u202freplay(), map,\u202fforEach, and more<\/p>\n<\/td> Do not provide operators<\/p>\n<\/td><\/tr> Are cancellable, using the unsubscribe() method, meaning the listener doesn\u2019t receive further values\u202f<\/p>\n<\/td> Are not cancellable<\/p>\n<\/td><\/tr> Are lazy, i.e., the producer function triggers after users subscribe to the stream\u202f<\/p>\n<\/td> Are eager, i.e., the Promise callback executes immediately and only once at the moment of its definition, without .then and .catch\u202f<\/p>\n<\/td><\/tr> Subscribers handle errors<\/p>\n<\/td> Push errors to the child Promises<\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Apparently, in the Angular Observable vs Promise comparison, the Observable wins. So, is there a good reason to use Promise, then? Absolutely.<\/p>\n\n\n\n Firstly, Observables come at a certain cost. As I mentioned before, they are not natively supported by browsers. Which means you must implement the RxJS library. And while it helps you create asynchronous or callback-based code, its bundle size can exceed\u202f17.4kb.<\/p>\n\n\n\n Secondly, when your Angular app<\/a> is asynchronous by default, there\u2019s no better way to handle all asynchronous functions and events than using Angular Promise. Isn\u2019t that right?<\/p>\n\n\n\n Next, if you don\u2019t want to use reactive style or don\u2019t care about streams of values and cancellable events, then go for Promises in Angular.<\/p>\n\n\n\n On a final note, we recently published an extremely detailed and helpful Angular UI Data Grid tutorial\u202fto help you\u202flearn how to\u202fcreate a full-featured Angular UI Grid<\/a> from scratch. So, you might want to check it out as well. Click below.<\/p>\n\n\n\nWhat Is Promise in Angular?<\/h2>\n\n\n\n
\n
\n
How To Create Promises in Angular?<\/h3>\n\n\n\n
![\"creating](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8272.creating-angular-promice-screenshot_6.png\" "\\"creating")
<\/figure>\n\n\n\n![\"angular](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8272.creating-angular-promice-screenshot_9.png\" "\\"creating")
<\/figure>\n\n\n\n![\"completion](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2806.creating-angular-promice-screenshot_8.png\" "\\"completion")
<\/figure>\n\n\n\nWhat Is Observable in Angular?<\/h2>\n\n\n\n
\n
How To Create Observables in Angular?<\/h3>\n\n\n\n
![\"importing](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2806.creating-angular-oservable-screenshot-11.png\" "\\"importing")
<\/figure>\n\n\n\n![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/1348.creating-angular-oservable-Screenshot_13.png\" "\\"getting")
<\/figure>\n\n\n\n![\"getting](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/7776.creating-angular-oservable-Screenshot_14.png\" "\\"getting")
<\/figure>\n\n\n\n![\"angular](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/7776.angular-remote-data-operations-demo.png\" "\\"angular")
<\/figure>\n\n\n\nHow To Use Angular Observable and Promise in App Builder?<\/h2>\n\n\n\n
\n
Angular Observable vs Promise: What\u2019s the Difference?<\/h2>\n\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n