Observable is a new feature in Angular 2 that is used to consume data from a web service via HTTP.

To understand it more, just simply think of Observable as an array whose items arrive asynchronously over a period of time. It helps you manage asynchronous data, that could be coming from your backend REST service. They are used within Angular 2 itself, including Angular’s event system and its http client service.

To use Observables, the Angular 2 framework uses a third-party library called Reactive Extensions (RxJS). It also good to note that Observables are a proposed feature for EcmaScript 2016, which is the next version of the JavaScript language.

Alright, let’s get started!

#1. Open your Angular 2 project.

#2. Go to your root @NgModule file( which is usually the app.module.ts)


#3. Import the HttpModule from angular 2 package:


#4. Add HttpModule in the imports list as shown below:


#5. Create a Service Angular 2 source class.

If you are using Angular-CLI, you can simply run this command:

Syntax: ng g service <Name of your Service>

Example: ng g service Stock


#6. Add your new Service in the providers list in your app.module.ts


#7. Go to your new service (for example: stock.service.ts)


#8. Import the required operators and libraries:


#9. Ensure that your new service class has the @Injectable() decorator.


#10. Create a new constructor and inject the http.


#11. Create a new method called getStocks



#12. Go to your component (for example: stock.component.ts)


#13. Import your Service to a component


#14. Inject the Service to the component


#15. Add a placeholder variable for our web data


#16. Add a subscriber method


#17. Open your Component’s HTML and add:


#18. Run your application and view the changes.

$100,000 is the average annual salary of talented software developers and your chances of getting this salary get better by learning Angular 2 today!

Sign up now and make the first step towards upgrading your skill set.

PLUS: Get up to 75% OFF our Angular 2 course in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.