Shared Service to provide data to multiple pages

The difference between service and provider?

Provider and service are the same things. If we want a single instance of a service then we should create it as a provider. If we want to use dependency injection (injecting things through the constructor) we need to add the @Injectable decorator and add it to the provider’s array. If we are just creating a simple class that you just want to create new instances of then we don’t need to add it as a provider (we would just instantiate a new instance of it, i.e. let myThing = new Thing();

Most of the apps have a lot of communication between different pages. In this example, we are creating service provider which had already had default dummy data and we can change the data in page1 and change data can be display in a different page, We will display the service data / edited service data in page2.

In this example, we will learn
1. Sharing service provider data across multiple pages.
2. Detecting changes using getters and setters inside the service provider.

Service can be access by from all the component, all the external request should be in service and can return observable and HttP module are always with service guessing.

Step 1: ionic start SharedService blank –v2, profile page we have default vale of name and age field from the service provider user.ts. Clicking on GoToPage2 will take our service data to confirm page.

Step 2 Remove the existing home page and create two more page as page1 and page2.  Add the following code in page1.html

<ion-header>
 ..Profile ..
</ion-header>
 
<ion-content padding>
    <ion-card>
        <ion-card-header>
            What you are entering
        </ion-card-header>
        <ion-card-content>
            <ion-badge item-right>Name</ion-badge> {{ user.name }}<br/><br/>
            <ion-badge item-right>Age</ion-badge> {{ user.age }}
        </ion-card-content>
    </ion-card>
    <ion-list>
        <ion-item>
            <ion-label fixed>Name</ion-label>
            <ion-input type="text" [(ngModel)] = "user.name"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label fixed>Age</ion-label>
            <ion-input type="number" [(ngModel)] = "user.age"></ion-input>
        </ion-item>
    </ion-list>
     
    <button ion-button full block (click)="goToPage2()">Go to Page 2</button>
</ion-content>

Step 3: Add the following code in page1.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { UserService } from '../../services/user';
import { Page2 } from '../page2/page2';
 
@Component({
  selector: 'page-one',
  templateUrl: 'page1.html'
})
export class Page1 {
  private user: any;
  private nav: any;
   
  constructor(public navCtrl: NavController, user: UserService, nav: NavController) {
    console.log(user.name);
    this.user = user;
    this.nav = nav;
  }
   
  goToPage2(){
    this.nav.push(Page2);
  }
}
Step 4: Add the following code in page2.html
<ion-header>
  <ion-navbar color="primary">
    <ion-title>
        Confirm
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content class="home">
    <ion-card>
        <ion-card-header>
            Please confirm your profile
        </ion-card-header>
        <ion-card-content>
            {{ user.name }} is {{ user.age }} years old
        </ion-card-content>
    </ion-card>
    <button ion-button full block (click)="goToPage1()">Go to Page 1</button>
</ion-content>

Step 5: Add the following code in page2.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { UserService } from '../../services/user';
import { Page1 } from '../page1/page1';
 
 
@Component({
  selector: 'page-two',
  templateUrl: 'page2.html'
})
export class Page2 {
    private user: any;
    private nav: any;
 
  constructor(public navCtrl: NavController, user: UserService, nav: NavController){
    console.log(user.name);
    this.user = user;
    this.nav = nav;
  }
   
  goToPage1(){
    this.nav.push(Page1);
  }
 
}

Step 5: Create provide, syntax for creating provider ionic
>>ionic g provider provider-name-here
Create folder services in the src directory and provider file user.ts. We need to import @Injectable decorator so that we can be shared our service to different page and component. When we use the get/set method to do additional processing when other pages access or set the variables in this common class. or Add the following code in user.ts

import {Injectable} from '@Angular/core';
 
@Injectable()
 
export class UserService{
    private _name: string;
    private _age: number;
     
    constructor(){
        this._name = 'John Conor';
        this._age = 31;
    }
 
    get name(){
        return this._name;
    }
     
    set name(newVal){
        console.log('Set name = ' + newVal);
        this._name = newVal;
    }
     
    get age(){
        return this._age;
    }
     
    set age(newVal){
        console.log('Set age = ' + newVal);
        this._age = newVal;
    }
}

 

We have to import our service provider in app.module.ts. Add the UserService in provider as
providers: [UserService]

Once we inject provider in app.module, then we don’t need to reinject the dependency in other pages, we can use our common provider in other pages.