Header Ads

ad728
  • 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 
    1. Internal Structure changes so change import statements of project
    2. 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 -

    import 'rxjs/add/operator/map'

    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

    Post Top Ad

    ad728

    Post Bottom Ad

    ad728