What are the changes Angular 6 in RxJS6
Now Angular 6 is the latest release. In angular 6 not much changes has been done, Only some classed has been updated to regular method based on their dependence. Observable class, such as throwError() and forkJoin(). Below example you can get clear understanding what are changes in Rxjs 5 to RxJS 6.
First, let’s consider a service that uses
forkJoin to make parallel API calls. The Angular 5/RxJS 5 code looked like this:
src/app/demo.service.ts:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Observable} from 'rxjs/Observable'; // Angular 5/RxJS 5.5 syntax
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable()
export class DemoService {
constructor(private http:HttpClient) {}
getBooksAndMovies() {
// Angular 5/RxJS 5.5 syntax
return Observable.forkJoin(
this.http.get('/api/books'),
this.http.get('/api/movies')
);
}
}
|
To upgrade this to RxJS 6 syntax, we need to change it to the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {forkJoin} from 'rxjs'; // change to new RxJS 6 import syntax
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable()
export class DemoService {
constructor(private http:HttpClient) {}
getBooksAndMovies() {
// Observable.forkJoin (RxJS 5) changes to just forkJoin() in RxJS 6
return forkJoin(
this.http.get('/api/books'),
this.http.get('/api/movies')
);
}
}
|
Similarly, in an example component, we might have previously used Observable.throw() to re-throw an exception within the error callback of the Observable:
src/app/app.component.ts:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
import {Component} from '@angular/core';
import {DemoService} from './demo.service';
import {Observable} from 'rxjs/Rx'; // Angular 5/RxJS 5.5
@Component({
selector: 'demo-app',
template:`
...
`
})
export class AppComponent {
...
createFood(name) {
let food = {name: name};
this._demoService.createFood(food).subscribe(
data => {
// refresh the list
this.getFoods();
return true;
},
error => {
console.error("Error saving food!");
return Observable.throw(error); // Angular 5/RxJS 5.5
}
);
}
...
}
|
In RxJS 6, Observable.throw() has been replaced by throwError() which operates very similarly to its predecessor. We just need to update the import statement and the new method name:
src/app/app.component.ts:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
import {Component} from '@angular/core';
import {DemoService} from './demo.service';
import {throwError} from 'rxjs'; // Updated for Angular 6/RxJS 6
@Component({
selector: 'demo-app',
template:`
...
`
})
export class AppComponent {
...
createFood(name) {
let food = {name: name};
this._demoService.createFood(food).subscribe(
data => {
// refresh the list
this.getFoods();
return true;
},
error => {
console.error("Error saving food!");
return throwError(error); // Angular 6/RxJS 6
}
|
0 comments:
Post a Comment