RxJS 6 Changes - Support With Angular Js- 6.0
RxJs-6 What is new and Changes ??
RxJS 6 is majorly used in Angular, and starting with Angular 6, it's a mandatory dependency in this versoon.
RxJS 6 (or higher) introduces two important changes compared to
RxJS-5
- Internal Structure changes so change import statements of project
- Previous way of chaining will not work now used - pipe() operator for chaining
Still If you update to RxJs-v6 so you have no need to change your all code angular provide a package for backward version comp ability.
Install -
npm install --save rxjs-compat
So Update your previous version of Rxjs (using ng update ) so what changes we need to do ??
1. Observable, Subject etc.
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
is now became -
import { Observable, Subject } from 'rxjs';
2. Methods of Creating Observable Changes
import 'rxjs/add/observable/of';
// or
import { of } from 'rxjs/observable/of';
is now became -
import { of } from 'rxjs';
3. Methods of Creating Observable Changes
Operators -
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
is now became -
import { map, take } from 'rxjs/operators';
USING OPERATOR MAP >>>>
In RxJs-5 & Angular 5 -
myObservable
.map(data => data * 2)
.subscribe(...);
Now - (uses - pipe() )
import { map } from 'rxjs/operators';
myObservable .pipe(map(data => data * 2)) .subscribe(...);
pipe
takes an infinite amount of arguments and each argument is an operator you want to apply to the Observable
.
So We can have method chaining like - >
import { filter , map, switchMap, throttle , reduce} from 'rxjs/operators';
myObservable
.pipe(map(data => data * 2), switchMap(...), filter(...), throttle(...), reduce (...))
.subscribe(...);
Example 2 -
RxJs 5 -
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
const squares$: Observable<number> = Observable.of(1, 2)
.map(n => n * n);
RxJs 6 -
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
const squares$: Observable<number> = of(1, 2).pipe(
map(n => n * n)
);
Angular JS 6 with RxJs 6.0 compatibility explains easily.....
No comments