In this session, we will learn what are observables and how we work with them in Angular - creating them and subscribing to them.And how we can deliver messages between different parts of your single-page application.

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