Kent Wynn Kent Wynn
  • Frontend Lang
    • HTML +
    • CSS SCSS LESS +
    • JavaScript ES6 TS
    • RxJS Library
    • Angular Framework
    • Ionic Framework
    • JavaFX Framework
    • Java Spring Framework
  • Frontend Dev
  • WordPress
  • UI/UX Designs
  • SEO
  • Tech Follows
Kent Wynn's Promotion Card
  • Kent Wynn’s Shop$10
  • My Account
  • Cart
  • Checkout
544
393
844
20K
0
Kent Wynn Kent Wynn

Software Engineer | UI/UX & Frontend Architect

Become Frontend Master
Kent Wynn Kent Wynn
  • Frontend Lang
    • HTML +
    • CSS SCSS LESS +
    • JavaScript ES6 TS
    • RxJS Library
    • Angular Framework
    • Ionic Framework
    • JavaFX Framework
    • Java Spring Framework
  • Frontend Dev
  • WordPress
  • UI/UX Designs
  • SEO
  • Tech Follows
  • Angular
  • Frontend Dev

Difference between Observable and Promise in Angular

  • August 11, 2021
  • 2.4K views
  • 3 minute read
difference-between-observable-and-promise-in-angular
Total
0
Shares
0
0
0
0
0
0
0
0
Table of Contents Hide
  1. Overview Observable and Promise
  2. Data Preprocessing
  3. Possibility to Cancel
  4. Event Direction
  5. Observable or Promise?

This article will compare the difference between Observable and Promise in Angular when we work with asynchronous.

Angular is a very famous front-end framework developed by Google. Like other frameworks, it uses a model based on a set of components to build an application.

This article will compare the difference between Observable and Promise when we work with asynchronous in Angular.

Overview Observable and Promise

There are many differences between Observable and Promise in Angular.

Even though the Observable is initialized, that doesn't mean it executes immediately. It will never be executed unless it is registered. 

Promise is different, it is executed as soon as it is instantiated. This is what makes Observable more advantageous when working with asynchronous.

Observable can hold many values ​​in it, but Promise cannot. Let's imagine Observable as an array, and Promise as a single value. That makes Observable more flexible in storing data than Promise. 

Besides, Observable is also a stream (a flow), and this flow is changed over time. We can pass any value to that stream and the Observable will immediately emit us the new value.

observable and promise in angular

Data Preprocessing

Unlike Promises, Observables can perform preprocessing of the data before we subscribe. 

observable.pipe(map((x) => 2 * x));

As for Promise, we can only process data when Promise returns data.

promise.then((x) => 2 * x);

Possibility to Cancel

After we have registered an Observable, we can still cancel it, if we don't want it to run forever. Promise does not support this.

const sub = obs.subscribe(...); 
sub.unsubscribe();

Event Direction

Another point that makes Observable superior to Promises is that it can do events related to event-driven manipulation. For example when clicking a button:

import { fromEvent } from "rxjs";
const buttonEl = document.querySelector("button");
const clicks$ = fromEvent(buttonEl, "click");
let subscription = clicks$.subscribe(e => console.log("clicked", e));

To do that, we need to use fromEvent the RxJS library. fromEvent is an Observable, we proceed subscribe. 

And when we click on the button, the Observable will immediately emit the value to us. Also, we can cancel this event if we don't want to execute anymore.

subscription.unsubscribe();

In addition to using Observable, we can do it in the usual way addEventListener to listen for events.

const buttonEl = document.querySelector("button");
const handler = e => console.log("clicked", e);
buttonEl.addEventListener("click", handler);

And removeEventListener to cancel the event listening

button.removeEventListener(‘click’, handler);

Observable or Promise?

In this article, we reviewed some of the differences between observable and promise in Angular. However, there are many things to learn about observable and promise, which we could discuss in the further articles.

Observables emit values that are subscribed to by observers. They don’t run unless something subscribes to them.

They’re always async and have additional functionality that async code like promises don’t have, like cancelation and retries.

Total
0
Shares
0
0
0
0
0
0
0
Kent Wynn

I'm Kent Wynn, from Vietnam, currently working as a Software Engineer, UI/UX Designs & Frontend Architect. With years of working and project experiences, I decided to develop KentWynn.Com, a technical article-based website for sharing and learning.

Related Topics
  • angular
  • rxjs
Previous Article
Some Useful Array Solutions With Lodash Library
  • Frontend Dev

Some Useful Array Solutions With Lodash Library

  • July 25, 2021
View Post
Next Article
The Complete Roadmap for Frontend Developers in 2021
  • Frontend Dev
  • Tech Follows

The Complete Roadmap for Frontend Developers in 2021

  • August 14, 2021
View Post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • What is HTML6? HTML6’s New Structural Patterns
  • How to safely upload SVG files to WordPress
  • How to Create a Blog | A Guide to Complete Blogging Success
  • Top 20 Best Free Website Speed Test Tools
  • How To Debug WordPress: A Complete Beginner’s Guide
Subscribe To Us

Get New Posts Delivered To Your Inbox

Stay Updated!

Subscribe now to our newsletter to receive latest articles, frontend trends and more!

Connect Me

I’m truly myself.

For me, success means the people we know and together what we are working on. I believe in teamwork and hard work, not magic!
About Me
Quick Navigation
  • Frontend Lang
    • HTML +
    • CSS SCSS LESS +
    • JavaScript ES6 TS
    • RxJS Library
    • Angular Framework
    • Ionic Framework
    • JavaFX Framework
    • Java Spring Framework
  • Frontend Dev
  • WordPress
  • UI/UX Designs
  • SEO
  • Tech Follows
Our Services
  • Become Frontend Master Courses
  • Marketing Services$150
  • Website Services$200
Shop Connect
  • Kent Wynn’s Shop$10
    • Wordpress Themes/Plugins
    • UI/UX Software
    • macOS Software
    • eBooks
    • Others
  • My Account
  • Cart
  • Checkout
Kent Wynn Kent Wynn
  • Contact Me
  • Hire Me
  • Donate Me
© 2021 Kent Wynn - Software Engineer | UI/UX & Frontend Architect | All Rights Reserved.

Input your search keywords and press Enter.