Observables in Angular
0 likes417 views
The document outlines the importance of observables in Angular for handling asynchronous operations and messaging between application parts. It distinguishes observables from promises in terms of emissions, subscription cancelation, and execution timing. Additionally, it discusses the advantages and disadvantages of using RxJS, a library for reactive programming with observables, and emphasizes the need for proper management to avoid memory leaks.
Observables in Angular
- 1. Presented By: Kiran & Aanchal Observables in Angular
- 2. Lack of etiquette and manners is a huge turn off. KnolX Etiquettes Punctuality Join the session 5 minutes prior to the session start time. We start on time and conclude on time! Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter. Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call. Avoid Disturbance Avoid unwanted chit chat during the session.
- 3. Our Agenda 01 Introduction to Observables 02 Defining Observers 03 Subscribing and Unsubscribing 04 Rxjs 05 Some Rxjs operators
- 4. Why do we need Observables? ● Angular makes use of observables as an interface to handle a variety of common asynchronous operations. ● Observables provide support for passing messages between parts of your application. ● The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of state changes. ● For example: The HTTP module uses observables to handle AJAX requests and responses.
- 5. What are Observables? ● Observable in Angular is a feature that provides support for delivering messages between different parts of your single-page application. ● This feature is frequently used in Angular because it is responsible for handling multiple values, asynchronous programming in Javascript, and also event handling processes. ● 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. ● Observables are declarative —that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.
- 7. Promise vs Observables ● Emitting Values: An Observable can emit multiple values. On the other hand, Promises emit only a single value. ● Cancelable Subscriptions in Observable: We have a subscription that can be canceled in Observables but Promises cannot be canceled. The subscription allows us to stop the listener from receiving more values. ● Lazy & Eager: Observables are considered as lazy as they are not executed until we subscribe to them and Promises are not lazy because they execute after the creation. We need not subscribe to promises. Promises are executed eagerly while Observables are executed lazily.
- 8. Observer & Observables ● Observers allow you to "push" new data into an observable sequence whereas An Observable is what we can use to listen, to new changes that are emitted by an Observer. ● Real-time usage of Observable and Observer - While receiving response from AJAX - While performing large tasks in client(browser)
- 10. Creating Observers ● In order to show how subscribing works, we need to create a new observable. There is a constructor that you use to create new instances, but for illustration, we can use some methods from the RxJS library that create simple observables of frequently used types:
- 11. Execution of Observables ● Next: The observer sends a value, which might be a number, string, or object, with each consecutive value. ● Error: If an error occurs in the Observable, no additional data may be sent to the Observable. ● Complete: The observer does not send any value, therefore the value is complete. This often indicates that the subscription to a certain Observable has been completed. ● Destroying an Observable: It simply means unsubscribing from it and removing it from the DOM.
- 12. What is RxJs? ● RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. ● The library also provides utility functions for creating and working with observables. These utility functions can be used for: ➢ Converting existing code for async operations into observables ➢ Iterating through the values in a stream ➢ Mapping values to different types ➢ Filtering streams ➢ Composing multiple streams
- 13. …RxJs When to use RxJS? If your project consists of lots of async task handling than RxJS is a good choice. Advantages of using RxJS ● RxJS can be used with other Javascript libraries and frameworks. ● RxJS is an awesome library when it comes to the handling of async tasks. ● RxJS offers a huge collection of operators in mathematical, transformation, filtering, error handling, join categories that makes life easy when used with reactive programming. Disadvantages of using RxJS ● Debugging the code with observables is little difficult.
- 14. RxJs Operators ● map - map operator is a transformation operator used to transform the items emitted by an Observable by applying a function to each item. ● take - emits only the first count values emitted by the source Observable ● takeWhile - passes values from the source observable to the observer as long as the function known as the predicate returns true. ● skip - it allows you to ignore the first x emissions from the source ● filter - filter items emitted by the source Observable by only emitting those that satisfy a specified predicate.
- 15. What is Memory Leak? ● A memory leak is a type of resource leak caused by poor management of memory allocation in a way that is not cleared from the memory when is not needed anymore. ● The memory leak is one of the worst problems developers could have since it is very difficult to debug and catch. ● This would lead to slow performance or even a crashing application. ● Most often memory leaks are caused due to bad management of Observables. ● There are certain ways to avoid it. You can use Angular async pipe or you can unsubscribe properly from observable.
- 16. DEMO
- 17. References ● https://angular.io/guide/observables ● https://www.learnrxjs.io/learn-rxjs/operators ● https://www.tektutorialshub.com/angular/rxjs-observable-using-create-of-from-i n-angular/ ● https://luukgruijs.medium.com/understanding-creating-and-subscribing-to-obse rvables-in-angular-426dbf0b04a3 ● https://www.tutorialspoint.com/rxjs/rxjs_overview.htm
- 18. Thank You ! Get in touch with us: Lorem Studio, Lord Building D4456, LA, USA