Hi all. I would be happy if someone can teach me right way to achive sharing data between components from service like in angular 1. As I understand “this” behaves now differently and it can’t be handlet with var that = this; but I still want to hold my data in service and access this from different components just like in angular 1, is this possible?
For example I want to run app and initialize getMovies in app.js that sets this._movies value and I can access this value from whatever component/page with calling getMovie();
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
@Injectable()
export class OrdersService {
static get parameters() {
return [[Http]];
}
constructor(http) {
this.http = http;
this._movies = [];
}
getMovies() {
console.log(this);
console.log(this._movies); // this._movies empty
this.http.get('http://www.omdbapi.com/?t=interstellar&y=&plot=short&r=json').subscribe(res => {
console.log(res._body); // prints movie data
this._movies = res._body; // sets data that I want to access from other component
console.log(this); // prints constructor
console.log(this._movies); // prints this._movies from constructor, has the data from api
});
}
getMovie() {
console.log(this); // get's constructor
console.log(this._movies); // this._movies have no value anymore
}
}
Thank you.
In your app.js under @App add providers: [ OrdersService ] than in any other page just inject it.
1 Like
Thank you so much, so easy mistake! So when I was injecting it as provider in each component it initialized it again and was working as new instance?
@sava999 I did the same. I am not initializing data inside @app
I am initializing data at say page 3 of my project. I want pop back to page 2 persisting data. At page 2 I get an error No Provider for MyService as I have not included it under providers. Any help with this !
Take in account that Angular 2 is hierarchical, so you may define your provider at page 2, and it will available for page 3 when you perform the nav.push(page3). That’s what I understand of this.
If you want your provider to be globally available, just define it once in the @App{} 
@matheo thanks for your reply, I seem to understand if we push onto the stack, it may transfer the dependency too (haven’t tried but makes sense).
What I am trying is to pop() back in the navigation stack and transferring updated data back to the previous page.
e.g. A landing page having “Add User” and “Submit New User” action buttons.
Click on “Add User”, an adduser page having a form is pushed on the nav stack where I add details and store it in an object. I want to transfer this updated object back to the landing page when I pop(). Where I will utilize this object and “Submit New User” to an API.
You may argue why not Submit to API from adduser page itself. This is a small example of what I want to achieve in a larger project. Hence the scenario. Thanks for any help!
I will research that stuff in the next few days, because i need it forma a project too! 
Lets read some Angular 2 data providers and see how to do it 
What you need should work.
If you in @App add provider and inject it into Page 1 and Page 2, please note that you shouldn’t set same provider in Page 1 and Page 2 just inject, then from Page 1 push Page 2, in Page 2 set some data in provider, pop Page 2, data from provider should be available back in Page 1.
If this is not working for you are you doing something wrong. Post some code and we will take a look.
Thank You all for your responses. I am now able to achieve what I needed having provider in @App{} .
I need to better understand parent and child components. Later will move from @App{} to Another @Page component.
Also, I was able to get the updated values and capture on onPageWillEnter(){} lifecycle event on pop() ing back.
ref: https://webcake.co/page-lifecycle-hooks-in-ionic-2/