life is too short for a diary




Observable Tutorial in Angular

Tags: angular

Observables provide support for passing messages between parts of your application. They are use frequently in Angular applications for handling async data flows.

What are observables?

An observable is a stream of data that we can subscribe to. It emits new values over time that we can react to.

For example, an Observable from a HTTP request would emit the response when the request completes. Or a time Observalbe could emit values at regular interval.

Observable help us handle asynchronous data flows in a declarative style. We define the Observable data stream and then subscribe to it to get notified of new values.

Getting started

Create a new angular app.

ng new angular-observables-demo
cd angular-observables-demo

Add Boostrap

npm install --save bootstrap@latest

and import it in src/styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';

Building a UserService

ng generate service user

And add user.service.ts

It returns an observable of the HTTP response.

Subscribing in the component

Modify app.component.ts:

For displaying data, you can modify app.component.html:


comments powered by Disqus