Undersand Datastream in Angular
This Article helps you to Understand, Datastream in Angular
A stream is a collection of data that comes in over time. Any type of data could be in the stream. such as attributes, user inputs, variables, caches, data structures, and even failures or errors, etc.
Value is not the only thing that stream emits. The stream may complete as the user closes the window or app. Or an error may happen which results in the closure of the stream.
At any point in time stream may emit any of the following three things
- Value: i.e the next value in the stream
- Complete: The stream has ended
- Error: The error has stopped the stream.
The stream of data can be anything. For Example
- Mouse click or Mouse hover events with x & y positions
- Keyboard events like keyup, keydown, keypress, etc
- Form events like value changes etc
- Data which arrives after an HTTP request
- User Notifications
- Measurements from any sensor
The stream of data can return any anything
- emit zero, one or more values of any time.
- can also emit errors.
- must emit the complete signal, when completes (finite streams).
- can be infinite, that they never complete
Reactive Programming
The reactive programming is all about creating the stream, emitting value, error or complete signals, manipulate, transfer or do something useful with the data streams.
This is where the RxJs comes into the picture
What is RxJS
The RxJS (Reactive Extensions Library for JavaScript) is a javascript library, that allows us to work with asynchronous data streams.
The Angular uses the RxJS library heavily in its framework to implement Reactive Programming.
Some of the examples where reactive programming used are
- Reacting to an HTTP request in Angular
- Value changes / Status Changes in Angular Forms
- The Router and Forms modules use observables to listen for and respond to user-input events.
- You can define custom events that send observable output data from a child to a parent component.
- The HTTP module uses observables to handle AJAX requests and responses.
The RxJs has two main players
- Observable
- Observers ( Subscribers)
What is an Observable in Angular
Observable is a function that converts the ordinary stream of data into an observable stream of data. You can think of Observable as a wrapper around the ordinary stream of data.
Observable stream or simple Observable emits the value from the stream asynchronously. It emits the complete signals when the stream completes or an error signal if the stream errors out.
Observables are declarative. You define an observable function just like any other variable. The observable starts to emit values only when someone subscribes to it.
Who are observers (subscribers)
Unless someone uses the value that was emitted by the observable, it is meaningless on its own. We refer to them as subscribers or observers.
Through callbacks, the observers / subscribers / consumers converse with the Observable.
The observer must subscribe with the observable to receive the value from the observable. While subscribing subscribers / consumers / observers optionally passes the three callbacks. next(), error() & complete()
