Part 01: Promise vs Observable in Angular with (.subscribe, .then , .pipe) Best Explanations

Observables & RxJS : video explanation

Streams so far are just a concept, an idea.

We link streams together using operators, so in in our previous example the add function is an operation, specifically it’s an operation which combines two streams to create a third.

Observables is a new primitive type which acts as a blueprint for how we want to create streams, subscribe to them, react to new values, and combine streams together to build new ones.

It’s currently in discussion whether or not Observables make it into the ES7 version of JavaScript.

We are still trying to roll out ES6 so even if it makes it, it will be many years before ES7 becomes something we can code with natively.

Until then we need to use a library that gives us the Observable primitive and that’s where RxJS comes in.

RxJS

RxJS stands for *R*eactive E*x*tensions for *J*ava*S*cript, and it’s a library that gives us an implementation of Observables for JavaScript.

Note

Observables might become a core part of the JavaScript language in the future, so we can think of RxJS as a placeholder for when that arrives.

RxJS is the JavaScript implementation of the ReactiveX API, which can be found here.

The API has multiple implementations in different languages, so if you learn RxJS you’ll know how to write RxJAVA, Rx.NET, RxPY etc…

Using RxJS with ES6

There are a couple of ways that you can add the RxJS library to your project.

With npm you can use the following command:

Copynpm install rxjs

Alternately, you can also import RxJS from a CDN by including it in your HTML document:

HTML

Copy<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

Note

RxJS 6 is a mandatory dependency starting from Angular 6, so you don’t need to install it manually.

The RxJS library also provides a number of Observable creation functions and operators (to build on the observables foundation) that can be added to your application via import statements like so:

JavaScript

Copyimport { map, filter, take } from "rxjs/operators";
import { interval, pipe } from "rxjs";

A Simple Example

Let’s understand the use of RxJS by working through a simple example.

Before we start adding any RxJS code, lets create a main.js file with a barebones Angular implementation. This will hold our RxJS code; Specifically within the ngOnInit function, a life cycle hook that is called once Angular is done creating the component.

JavaScript

Copyimport { NgModule, Component } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

@Component({
  selector: "app",
  template: `
    <div>
      <p>Observables & RxJS Example</p>
      <p>(Please check the console)</p>
    </div>
  `
})
class AppComponent {
  constructor() {}

  ngOnInit() {
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Next, we need to get an instance of an RxJS observable. There are numerous methods provided by the RxJS library for this, but for our example we will be using the interval operator.

interval

An observable isn’t a stream. An observable is a blueprint which describes a set of streams and how they are connected together with operations.

Lets assume for our use case, we want our observable to create a single stream and push onto that stream a number every second, incremented by 1.

For this purpose, we can use the interval operator which creates an Observable that emits numbers in sequence based on the provided time interval like so:

JavaScript

Copyimport { interval } from 'rxjs';

const numbers = interval(1000);

The operation interval takes as the first param the number of milliseconds between each push of the number onto the stream.

Note

In RxJS land no one can hear you stream, unless you subscribe.

This observable is cold, that means it’s not currently pushing out numbers.

The observable will become hot and start pushing numbers onto it’s first stream, when it gets it’s first subscriber, like so:

JavaScript

Copyimport { interval } from 'rxjs';

const numbers = interval(1000);

numbers.subscribe(value => console.log("Subscriber: " + value));

By calling subscribe onto an observable it:

Turns the observable hot so it starts producing.
Lets us pass in a callback function so we react when anything is pushed onto the final stream in the observable chain.

Our application now starts printing out:

CopySubscriber: 0
Subscriber: 1
Subscriber: 2
Subscriber: 3
Subscriber: 4
Subscriber: 5
Subscriber: 6
Subscriber: 7
Subscriber: 8
Subscriber: 9
Subscriber: 10

take

But it just keeps on printing, forever, we just want the first 3 items so we use another operator called take.

We pass to that operator the number of items we want to take from the first stream. It creates a second stream and only pushes onto it the number of items we’ve requested, like so:

JavaScript

Copyimport { interval } from 'rxjs';
import { take } from 'rxjs/operators';

const numbers = interval(1000);
const takeThree = numbers.pipe(take(3));

takeThree.subscribe(value => console.log("Subscriber: " + value));

This now prints out the below, and then stops:

CopySubscriber: 0
Subscriber: 1
Subscriber: 2

Tip

pipe is an Observable method which is used for composing operators. In more simpler terms, this allows us to chain operators together.

map

Finally, I want to add another operator called map, this takes as input the output stream from take, convert each value to a date and pushes that out onto a third stream like so:

JavaScript

Copyimport { interval } from 'rxjs';
import { take, map } from 'rxjs/operators';

const numbers = interval(1000);
const takeThree = numbers.pipe(
  take(3),
  map((v) => Date.now())
);

takeThree.subscribe(value => console.log("Subscriber: " + value));

Note

Notice the use of pipe to chain multiple operators together.

This now prints out the time in milliseconds, every second, like so:

CopySubscriber: 1475506794287
Subscriber: 1475506795286
Subscriber: 1475506796285

Tip

Without declaring separate constants, we can also write the same code in a single statement like so:

JavaScript

Copyinterval(1000)
  .pipe(
    take(3),
    map(v => Date.now())
  )
  .subscribe(value =>     console.log("Subscriber: " + value));

Other operators

The above example showed a very very small subset of the total number of operators available to you when using RxJS.

The hardest part of learning RxJS is understanding each of these operators and how to use them.

In that regard even though you are writing in JavaScript learning RxJS is closer to learning another language altogether.

You can find a list of the operators by looking at the official documentation here.

The documentation for the operators we just used above is:

Marble Diagrams

Trying to understand an operator by just reading some words is pretty difficult.

This is why in this lecture I’ve tried to use animations as much as possible.

The Rx team use something called a marble diagram to visually describe an operators function.

This is the official marble diagram for the map operator:

The line at the top represents time and the marbles with numbers 1, 2 and 3 represent the input stream over time.
The line at the bottom represents the output stream after each of the marbles has been processed through the operator.
The bit in the middle is the operator, in this example the operator is a map function which multiplies each marble in the input stream by 10 and pushes them to the output stream.

So in the above the value 1 gets pushed out onto the output stream as 10.

These diagrams are actually interactive.

To understand how an operator works we move the marbles around in the input stream and see how this affects the output stream, like so:

Marbles for the above operators are Take and Map

Summary

Observables are a blueprint for creating streams and plumbing them together with operators to create observable chains.

RxJS is a library that lets us create and work with observables.

We can subscribe to an observable chain and get a callback every time something is pushed onto the last stream.

By default observables are cold and only become hot when they get their first subscriber.

Learning RxJS involves understanding all the operators that are available and how to use them together.

We use marble diagrams to help explain how an operator works.

In this lecture we used RxJS in isolation, in the next lecture we will look at how to use RxJS in Angular.

Listing

Listing 1. main.ts

TypeScript

Copyimport { NgModule, Component } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { map, filter, take } from "rxjs/operators";
import { interval, pipe } from "rxjs";

@Component({
  selector: "app",
  template: `
    <div>
      <p>Observables & RxJS Example</p>
      <p>(Please check the console)</p>
    </div>
  `
})
class AppComponent {
  constructor() {}

  ngOnInit() {
    interval(1000)
      .pipe(
        take(3),
        map(v => Date.now())
      )
      .subscribe(value => console.log("Subscriber: " + value));

    /*
  const middleware = pipe(
    take(3),
    map(v => Date.now())
  );

  interval(1000)
    .pipe(middleware)
    .subscribe(value => console.log("Subscriber: " + value));
    */
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Caught a mistake or want to contribute to the book? Edit this page on GitHub!

@@@@@@@@@@@ 2 nd Explanation @@@@@@@@@@@

################ 3 rd Explanation #################################### Advance best Explanation definitely Read below ########################################################################################
we will discuss the differences between promises and observables. In Angular 2, to work with asynchronous data we can use either Promises or Observables. In our previous videos in this series, we discussed using both Observables and Promises. There are several differences between Promises and Observables. In this video let's discuss these differences.

As a quick summary the differences are shown in the table below

Promise	Observable
Emits a single value	Emits multiple values over a period of time
Not Lazy	Lazy. An Observable is not called until we subscribe to the Observable
Cannot be cancelled	Can be cancelled using the unsubscribe() method
	Observable provides operators like map, forEach, filter, reduce, retry, retryWhen etc.

A Promise emits a single value where as an Observable emits multiple values over a period of time. You can think of an Observable like a stream which emits multiple items over a period of time and the same callback function is called for each item emitted. So with an Observable we can use the same API to handle asynchronous data whether that data is emitted as a single value or multiple values over a period of time.

A Promise is not lazy where as an Observable is Lazy. Let's prove this with an example. Consider this method getEmployeeByCode() in employee.service.ts. Notice this method returns an Observable.

getEmployeeByCode(empCode: string): Observable<IEmployee> {

return this._http.get("http://localhost:31324/api/employees/" + empCode)

.map((response: Response) => <IEmployee>response.json())

.catch(this.handleError);

}

Here is the consumer code of the above service. In our example, this code is in employee.component.ts in ngOnInit() method. Notice we are subscribing to the Observable using the subscribe() method. An Observable is lazy because, it is not called and hence will not return any data until we subscribe using the subscribe() method. At the moment we are using the subscribe() method. So the service method should be called and we should receive data.

ngOnInit() {

let empCode: string = this._activatedRoute.snapshot.params['code'];

this._employeeService.getEmployeeByCode(empCode)

.subscribe((employeeData) => {

if (employeeData == null) {

this.statusMessage =

'Employee with the specified Employee Code does not exist';

}

else {

this.employee = employeeData;

}

(error) => {

this.statusMessage =

'Problem with the service. Please try again after sometime';

console.error(error);

});

}

To prove this
1. Launch Browser developer tools by pressing F12 while you are on the browser.
2. Navigate to /src/employees/emp101
3. Click on the Network Tab
4. In the Filter textbox, type "api/employees"
5. At this point, you should only see the request issued to EmployeeService in the table below
6 Hover the mouse over "emp101" under "Name" column in the table

7. Notice the request to employee service (/api/employees/emp101) is issued

lazy observable

Instead of hovering over the request, if you click on it, you can see the response data as shown below. Make sure you select the "preview" tab.

lazy observablecollection

Now in employee.component.ts file, comment the subscribe() method code block as shown below. Notice we are still calling the getEmployeeByCode() method of the EmployeeService. Since we have not subscribed to the Observable, a call to the EmployeeService will not be issued over the network.

ngOnInit() {

let empCode: string = this._activatedRoute.snapshot.params['code'];

this._employeeService.getEmployeeByCode(empCode)

//.subscribe((employeeData) => {

// if (employeeData == null) {

// this.statusMessage =

// 'Employee with the specified Employee Code does not exist';

// }

// else {

// this.employee = employeeData;

// }

//},

//(error) => {

// this.statusMessage =

// 'Problem with the service. Please try again after sometime';

// console.error(error);

//});

}

With the above change in place, reload the web page. Notice no request is issued over the network to the EmployeeService. You can confirm this by looking at the network tab in the browser developer tools. So this proves that an Observable is lazy and won't be called unless we subscribe using the subscribe() method.

Now, let's prove that a Promise is NOT Lazy. I have modified the code in employee.service.ts to return a Promise instead of an Observable. The modified code is shown below.

getEmployeeByCode(empCode: string): Promise<IEmployee> {

return this._http.get("http://localhost:31324/api/employees/" + empCode)

.map((response: Response) => <IEmployee>response.json())

.toPromise()

.catch(this.handlePromiseError);

}

Here is the consumer code of the above service. In our example, this code is in employee.component.ts in ngOnInit() method.

ngOnInit() {

let empCode: string = this._activatedRoute.snapshot.params['code'];

this._employeeService.getEmployeeByCode(empCode)

.then((employeeData) => {

if (employeeData == null) {

this.statusMessage =

'Employee with the specified Employee Code does not exist';

}

else {

this.employee = employeeData;

}

(error) => {

this.statusMessage =

'Problem with the service. Please try again after sometime';

console.error(error);

});

}

Because a promise is eager(not lazy), calling employeeService.getEmployeeByCode(empCode) will immediately fire off a request across the network to the EmployeeService. We can confirm this by looking at the network tab in the browser tools.

Now you may be thinking, then() method in this case is similar to subscribe() method. If we comment then() method code block, will the service still be called. The answer is YES. Since a Promise is NOT LAZY, Irrespective of whether you have then() method or not, calling employeeService.getEmployeeByCode(empCode) will immediately fire off a request across the network to the EmployeeService. You can prove this by commenting then() method code block and reissuing the request.

################################################################################################################################################
http://csharp-video-tutorials.blogspot.com/2017/09/angular-promises-vs-observables.htmlhttps://medium.com/@mpodlasin/promises-vs-observables-4c123c51fe13
Examples =: https://github.com/jpssasadara/web_Socket_Epic_POS_Final/tree/master/Fhttps://github.com/jpssasadara/Ex_Hub/tree/master/1.5%20Ex_hub
##################################################################################################################################################

Angular Observable pipe

his page will walk through Angular Observable pipe example. RxJS pipe is used to combine functional operators into a chain. pipe is an instance method of Observable as well as a standalone RxJS function. pipe can be used as Observable.pipe or we can use standalone pipe to combine functional operators. The declaration of pipe is as following.

public pipe(operations: ...*): Observable

pipe accepts operators as arguments such as filter, map, mergeScan etc with comma separated and execute them in a sequence they are passed in as arguments and finally returns Observable instance. To get the result we need to subscribe it. Now let us discuss the complete example.

echnologies Used

Find the technologies being used in our example.
1. Angular 7.0.0
2. Angular CLI 7.0.3
3. TypeScript 3.1.1
4. Node.js 10.3.0
5. NPM 6.1.0
6. RxJS 6.3.3
7. In-Memory Web API 0.6.1

Import RxJS 6 Observable and Operators

In RxJS 6, Observable and operators are imported as following.
1. Import Observable and of from rxjs.

import { Observable, of } from 'rxjs';

pipe will be accessed using Observable.pipe. To use standalone pipe, we can also import it.

import { pipe } from 'rxjs';

2. Operators are imported from rxjs/operators. Find some operators to import it.

import { mergeMap, switchMap, retry, 
         map, catchError, filter, scan } from 'rxjs/operators';

Observable.pipe with filter, map and scan

Here we will use Observable.pipe to combine functions. Suppose we have a service method to get numbers.

getNumbers(): Observable<number> {
   return of(1, 2, 3, 4, 5, 6, 7);
}

1. Find the code to use pipe with filter operator.

calculateNumbers() {
  this.bookService.getNumbers().pipe(
    filter(n => n % 2 === 1)
  )
  .subscribe(result => console.log(result));
}

Output will be 1,3,5,7.
We can observe that we are passing filter operator within pipe. Final result of pipe after executing filter, will be instance of Observable. To get the result we need to subscribe it.
2. Find the code to use pipe with filter and map operators.

calculateNumbers() {
  this.bookService.getNumbers().pipe(
    filter(n => n % 2 === 1),
    map(n => n + 10)
  )
  .subscribe(result => console.log(result));
}

Output will be 11, 13, 15, 17.
In the above code we are passing filter and map operators in pipe function as arguments. filter and map will execute in the order they are passed in. On the Observable instance returned by getNumbers(), filter operator will be executed and on the Observable instance returned by filter, map operator will be executed and the final result returned by pipe will be the result returned by last operator i.e. map in above code.
3. Find the code to use pipe with filter, map and scan operators.

calculateNumbers() {
  this.bookService.getNumbers().pipe(
    filter(n => n % 2 === 1),
    map(n => n + 10),
    scan((sum, n) => sum + n)
  )
  .subscribe(result => console.log(result));
}

The output will be 11, 24, 39, 56.
In the above code we are using three operators with pipe i.e. filter, map and scan. They will execute in the order they are passed in as arguments. In the above code, first filter will execute then map and then scan. Final output returned by pipe will be Observable returned by scan.

Using Standalone pipe

To use pipe standalone, we need to import it as following.

import { pipe } from 'rxjs';

Now find the code snippet to use it.

calculateNumbers() {
  //Create a function to accept Observable instance   
  const calculationFun = pipe(
 filter((n: number) => n % 2 === 1),
 map((n: number) => n + 10),
 scan((sum, n) => sum + n)
  );

  //Instantiate response Observable
  const calculation$ = calculationFun(this.bookService.getNumbers());

  //Subscribe the Observable instance
  calculation$.subscribe(result => console.log(result));
}

Output will be 11, 24, 39, 56.

Error Handling: pipe with retry and catchError

retry operator reties to access URL for the given number of time before failing. catchError has been introduced in RxJS 6. catchError is used in place of catch. Find the code to use pipe with retry and catchError operator.

getBooks() {
 this.allBooks$ = this.bookService.getBooksFromStore().pipe(
 retry(3), 
 map(books => {
   if (books.length < 5) {
  throw new Error('Not enough books');
   }
   return books;
 }),
 catchError(err => {
   console.error(err);
   return of([]);
 })
 );
}

We can also subscribe the Observable instance.

getBooks() {
 this.bookService.getBooksFromStore().pipe(
 retry(3), 
 map(books => {
   if (books.length < 5) {
  throw new Error('Not enough books');
   }
   return books;
 }),
 catchError(err => {
   console.error(err);
   return of([]);
 })
 )
 .subscribe(books => this.allBooks = books);
}

pipe with mergeMap

Find the code snippet to use pipe with mergeMap operator.

getAllFavBooks() {
   this.bookService.getFavBookFromStore(101).pipe(
     mergeMap(book => { 
      let category = book.category;
      return this.bookService.getBooksByCategoryFromStore(category);
     })
   ).subscribe(books => {
     this.allFavBooks = books;
   });
}

pipe with switchMap

Find the code snippet to use pipe with switchMap operator.

searchSimilarBooks(id: number) {
  this.bookService.getFavBookFromStore(id).pipe(
    switchMap(book => {
      let category = book.category;
      return this.bookService.getBooksByCategoryFromStore(category);
    }),
    catchError(err => of([]))
  )
  .subscribe(books => {
    this.similarBooks = books;
    console.log(books);
  });
}

Complete Example

Here we will provide complete demo to use pipe.
book.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, of, pipe } from 'rxjs';
import { mergeMap, switchMap, retry, 
         map, catchError, filter, scan } from 'rxjs/operators';
import { BookService } from './book.service';
import { Book } from './book';

@Component({
   selector: 'app-book',
   templateUrl: './book.component.html'
})
export class BookComponent implements OnInit { 
   softBooks: Book[];
   allFavBooks: Book[];
   similarBooks: Book[];

   constructor(private bookService: BookService) { }
   
   ngOnInit() {
      this.calculateNumbers1();
      this.calculateNumbers2();
      this.getSoftBooks();
      this.getAllFavBooks();
   }

   //Using Observable.pipe with filter, map and scan
   calculateNumbers1() {
    this.bookService.getNumbers().pipe(
      filter(n => n % 2 === 1),
      map(n => n + 10),
      scan((sum, n) => sum + n)
    )
    .subscribe(result => console.log(result));
   }

   //Using Standalone pipe
   calculateNumbers2() {
    //Create a function to accept Observable instance   
    const calculationFun = pipe(
        filter((n: number) => n % 2 === 1),
        map((n: number) => n + 10),
        scan((sum, n) => sum + n)
      );

    //Instantiate response Observable
    const calculation$ = calculationFun(this.bookService.getNumbers());

    //Subscribe the Observable instance
    calculation$.subscribe(result => console.log(result));
   }
 
   //Using retry() and catchError operator
   getSoftBooks() {
      this.bookService.getBooksFromStore().pipe(
          retry(3), 
          map(books => {
            if (books.length < 5) {  //It will throw error in console
              throw new Error('Not enough books');
            }
            return books;
          }),
          catchError(err => {
            console.error(err);
            return of([]);
          })
      )
      .subscribe(books => this.softBooks = books);
   }

   //Using mergeMap
   getAllFavBooks() {
      this.bookService.getFavBookFromStore(101).pipe(
          mergeMap(book => { 
            let category = book.category;
            return this.bookService.getBooksByCategoryFromStore(category);
          })
      ).subscribe(books => {
            this.allFavBooks = books;
      });
   }   
   
   //Using switchMap
   searchSimilarBooks(id: number) {
      this.bookService.getFavBookFromStore(id).pipe(
          switchMap(book => {
              let category = book.category;
              return this.bookService.getBooksByCategoryFromStore(category);
          }),
          catchError(err => of([]))
      )
      .subscribe(books => {
          this.similarBooks = books;
          console.log(books);
      });
   }
}

book.component.html

<b>All Favorite Books</b><br/>
<ul>
  <li *ngFor="let book of allFavBooks" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

<b>Search Similar Books</b><br/><br/>
  
ID: <input [(ngModel)]="bookId" (input)="searchSimilarBooks(bookId)">

<ul>
  <li *ngFor="let book of similarBooks" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

book.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Book } from './book';

@Injectable({
    providedIn: 'root'
})
export class BookService {
    bookUrl = "/api/books"; 

    constructor(private http: HttpClient) { }
    
    getNumbers(): Observable<number> {
      return of(1, 2, 3, 4, 5, 6, 7);
    }
    getBooksFromStore(): Observable<Book[]> {
      return this.http.get<Book[]>(this.bookUrl);
    }
    getFavBookFromStore(id: number): Observable<Book> {
      return this.http.get<Book>(this.bookUrl + "/" + id);
    }    
    getBooksByCategoryFromStore(category: string): Observable<Book[]> {
      return this.http.get<Book[]>(this.bookUrl + "?category=" + category);
    }        
}

book.ts

export interface Book {
   id: number;
   name: string;
   category: string;
}

app.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   template: `
 <app-book></app-book>
    `
})
export class AppComponent { 
}

test-data.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class TestData implements InMemoryDbService {
  createDb() {
    let bookDetails = [
      { id: 101, name: 'Angular by Krishna', category: 'Angular' },
      { id: 102, name: 'Core Java by Vishnu', category: 'Java' },
      { id: 103, name: 'NgRx by Rama', category: 'Angular' }
    ];
    return { books: bookDetails };
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent }  from './app.component';
import { BookComponent }  from './book.component';
import { BookService } from './book.service';

//For InMemory testing
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { TestData } from './test-data';

@NgModule({
  imports: [     
      BrowserModule,
      HttpClientModule,
      FormsModule,
      InMemoryWebApiModule.forRoot(TestData)  
  ],
  declarations: [
      AppComponent,
      BookComponent
  ],
  providers: [
  ],
  bootstrap: [
      AppComponent
  ]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Install angular-in-memory-web-api@0.6.1
4. Run ng serve using command prompt.
5. Access the URL http://localhost:4200
Find the print screen of the output.

Part 02: Angular : BehaviorSubject

Angular : RxJS BehaviorSubject

Angular View Updating Using Observables, Behavior Subject, and Event Emitters

Angular has an awesome built-in feature for updating views dynamically known as Change Detection. Essentially, when an event occurs, change detection is triggered and the new data gets displayed, which allows for a superior user experience, and honestly just looks cool 😀! This article is less about the inner workings of change detection and more focused on a very specific implementation of change detection. If you’d like to know more about how it all works, I recommend checking out the following:

There are different types of events or objects that trigger change detection in Angular. We’ll be looking at, as you already know from the title, Observables, Behavior Subjects and Event Emitters, but more specifically how to use them when fetching/sending data within related and unrelated components.

Related Components: Observables + Event Emitters

Ok let’s set the scene…queue the soft jazz and dim the lights…

Let’s imagine we’re fetching data from a database on the initialization of a component. To fetch the data, we’re using a service that defines an observable, to which we subscribe to get the data for our view.

At this point it’s tempting to believe that our work is done (wow we’re fast!) that now when new data is sent to the DB our observable will detect it and update our view accordingly.👏

Sadly that is not the case 😥. The reason being is that our observable is “pointed” to an http request, which by design closes as soon as it delivers its response, and thus, unless the observable is explicitly told to fire off another http request, it will never know the database has been updated.

One way around this is to use websockets. However, let’s assume that’s not an option because your manager forbids it because he/she thinks of little tiny sock puppets singing about the internet every time they hear the word, and it terrifies them…. (web sockettes 😅)…ok… well that’s no biggie. We can just push the new data into the collection from the frontend, along with sending it to the DB, once the user submits the form. Remember, submitting a form is an event and, if in that event we update the collection, change detection is triggered and the view updated with the new information. Sweet, we’ve solved it! But wait, this will only work if said form exists in the template of the component. What if the form is in a child component, say in a modal? Oh shoot. No worries! This is when event emitters come into play.

Pics first!

Ok, so in the template of our example companies component we have two modals that we’re “injecting” into the template. These are going to be our forms for creating or updating data. Notice that in <creation-modal> we have an event, (addedData), and in <update-modal> it is (updated). Those events are tied to the child components, the modals, in this way:

So we’ve defined in our modal components these EventEmitters(). Now how do we trigger them?

So the event emitters are fired off when we call “emit” on them. In this case, I’m passing the callback data with emit().

If you happen to recall, earlier we defined (addedData) and (updated) in our parent template and they triggered methods in the parent component, passing off the data from the “$event”. ( i.e. (addedData)=”addData($event)” ). What follows is this:

So our functions in the companies component are called from the template with the given callback data, which is either added to the collection (in this scenario an array) or used to update the values of an object in the collection. And because an event occurs, our view updates and our users are happy. Yay!!!

Unrelated Components: Observables + Behavior Subjects

The question now is what to do if your form isn’t in a child component but in a completely separate component. For this situation we can’t use the standard event emitters but we can do something similar by using Observables and Behavior Subjects — or I guess technically a behavior subject as an observable 🧐.

How is this going to work? This is how I like to think of it:

We have two components and a service. Both components connect to the behavior subject service, which is going to pass the new data from the form component to the list component.

So let’s first define a data service with a behavior subject and a method that calls “next” on the subject.

*Note: data: object = {} is an empty object with which we’re using to “initialize” the behavior subject. It allows us to check for null before performing any action in whatever component subscribes to the currentData observable.

Notice how we define an observable based off the behavior subject. We’re going to subscribe to that observable in our list component. The changeDataSub() method is going to be called from the form component as such:

So when the form is submitted, the callback data is added to our behavior subject, which we’re subscribed to like so from the list component:

*Note: this requires you to make a dataSubject object in the component (i.e. dataSubject: any = {}; )

Eureka! Now when new data is sent to the DB it is also passed between unrelated components via a service, and… because we’re subscribed to an observable, change detection is triggered and the updated list is updated in the view as well. 😎

Observables, behavior subjects, and event emitters are wonderful tools for creating more sophisticated and enjoyable views. This is just a look at two specific use cases for how to implement them. If you’re unfamiliar with the details of these Angular features, there are lots of great articles out there that can describe them and their properties in far greater depth than I can. It’s worth looking further into them.

If you have any questions or constructive feedback, please let me know. 🙂

Cheers!

Promise vs Observable in Angular with (.subscribe, .then , .pipe) Best Explanations & Angular : BehaviorSubject

Note

Note

Note

Tip

Note

Tip

Angular Observable pipe

Contents

echnologies Used

Import RxJS 6 Observable and Operators

Observable.pipe with filter, map and scan

Using Standalone pipe

Error Handling: pipe with retry and catchError

pipe with mergeMap

pipe with switchMap

Complete Example

Run Application

References

Download Source Code

Promises vs Observables | Do we really need reactive programming?

Angular View Updating Using Observables, Behavior Subject, and Event Emitters

Related Components: Observables + Event Emitters

Unrelated Components: Observables + Behavior Subjects

Comments

Post a Comment

Popular posts from this blog