Angular2 working with http

Things get more interesting when working with Http in Angular 2.

You will need to include angularjs2 http script.



Lets create a simple component that grab data from a rest service and renders on your component. Lets start with a component :-



If you look at "ngOnInit", this is a directive that automatically gets call when your component loads or alternatively you can use ES6 "constructor". But there are not the same. ngOnInit allows child components to setup their events or initiate a get request.

Our http request are called via getStock() and it uses reactive js to help to turn raw data into json.

this.http.get("http://jsonplaceholder.typicode.com/posts/1").map((res: Response) =>

res.json()).subscribe(

data => {
this.info = new Article(data.id, data.title, data.title);
},
err => console.log(err),
() => console.log('done!'));
};

As you can see, we use http.get() and then calls map to convert data into JSON format. Next we pass this to subscribe and data gets loaded in our markup / front end. All in a single statement. Cool.

Catches here :-

you need to import rxjs/Rx, otherwise you will not be able to call map method.

If you look at your mark up you see that we have a question mark beside our object attribute

you need to inject HTTP_PROVIDERS in our main.ts file as show below :-



If you missed that you, you will get "no http provider found " and lots of red colored text.