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

Example:

 

#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.

JOIN THE ANGULAR ACADEMY!
$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.