Top 10 RxJs Operators in Angular

This slides describes about Top 10 Rxjs Operators in Angular which can be quite useful in our day to day life

1. Jalpesh Vadgama @jalpesh, Co-Founder, FutureStack Solution Top 10 RxJs Operators in Angular

2. About Me More than 14 years of experience in Web Development, Cloud Solutions and Enterprise Grade Applications. Co-Founder of Future Stack Solution http://www.futurestacksolution.com Awarded Microsoft MVP 8 times. Currently MVP in Visual Studio and Development Technologies. A community guy love to network with new people!. An enthusiast developer trying to learn everyday something new

3. Agenda What problems RxJs going to solve? Callback, Promises and What is the problem with that? Observables Demo with Observables and Of operator Different operators available in RxJs Questions and Answer

4. “To think creatively, we must be able to look afresh at what we normally take for granted” George Keller Bringing functional programming to JavaScript

5. Callbacks

6. functionToCallXHR () {      function   Success ( successParams ) {        // Handle success     }      function   Failure ( failureParams ) {        // Handle failure     }   }  

7. Promises

8. let   result  =  http . get ( "your  api   url " );      result . then ( function ( params ){      },    function  ( params ){ // Handle failure      } ); // Handle success

9. What is I want to retry again after failure?

10. Observables

11. What is Observables? An observable is essentially a stream (a stream of events, or data) and compared to a Promise, an Observable can be cancelled. .

12. What is Observables? An observable have at least participant The Creator The Subscriber:

13. Operators Operators are functions that operate on observables and returns the new observables They are pure functions that transform information in the observable stream that create new observables, often based on the current observable Most importantly, the operators in RxJS allow for complex asynchronous code that can be easily composed in a declarative manner. .

14. Operator Demo

15. Of operator Of operators convert any object into observables Mostly we are using it from to convert a JSON retrieve from our apis

16. Concat operator Concat operator emit the emissions from two or more Observables without interleaving them You can think of concat like a line at a ATM, the next transaction (subscription) cannot start until the previous completes!

17. MergeMap operator The merge map operator is handy when the requirement is to merge response from two observables

18. Filter operator The filter operator is handy when you need to filter something The following example will get an observable that emit the numbers. We will use the filter operator to only emit the even numbers

19. Delay operator The Delay operator emits values after some delay

20. Retry operator if a source Observable emits an error, resubscribe to it in the hopes that it will complete without error

21. Zip operator Multiple observables emitting at alternate intervals

22. Distinct operator Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from previous items.

23. IsEmpty operator Emits false if the input observable emits any values, or emits true if the input observable completes without emitting any values.

24. 10 th Operator There are more than 50 operators are there. You can look at those operators at - https://rxjs-dev.firebaseapp.com/api/operators/ Even you can build your own operators!!

25. Q&A

26. Thank you! Email : [email protected] Blog : https://www.dotnetjalps.com YouTube: http://bit.ly/codewithjv GitHub: https://github.com/jalpeshvadgama Twitter: @Jalpesh