Global object in angular2

Question

How can I create a global object in angular2. I am collecting data from one page to another means page by page(may be for 4-5 pages) using navParams in ionic2. but want to store it in global object & finally submit it. I have tried it using global provider but haven't got most of it & not getting any clue also. Please any suggestion.

Answer 1

As with my question ionic community suggest to use global provider. i did use global provider to hold my 7 step form data and final submit on last step.

i used with ionic 3. provider code:

import { Injectable } from '@angular/core';


@Injectable()
export class NcConnectionProvider {
    public statecode:any;
    public districtcode:any;

  constructor() {
    //console.log('Hello NcConnectionProvider Provider');
  }

}

Page.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NcConnectionProvider } from '../../providers/nc-connection/nc-connection';


@IonicPage()
@Component({
  selector: 'page-nc-connection',
  templateUrl: 'nc-connection.html',
})
export class NcConnectionPage {
    public distbform:FormGroup;
    public statedata:any;
    public districtdata:any;

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public ncdatashare: NcConnectionProvider) {

  }

    locateDistb(form: NgForm){
        this.ncdatashare.statecode = this.distbform.value.state;
        this.ncdatashare.districtcode = this.distbform.value.district;
      }

}

you can inject provider to multiple pages as you want and access your global variable/object. like in example value set to this.ncdatashare.statecode = this.distbform.value.state; now you can access this.ncdatashare.statecode to other page but provider must inject there.

Answer 2

Make sure to provide some sample code to elaborate the problem better. Moreover, following is the way you can follow to collect the data in single object.

Create a service with a variable and its getter setter. Inject this service in your component and set the data wherever needed and later use its get method to collect it back again.

    @Injectable()
    export class DataService{
      private _data: any;

      get data() {
         return this._data;
      }

      set data(data: any) {
        this._data = data;
      }    
   }

and in side your component

    @Component({
      // configurations
    })
    export class LoginComponent {
    constructor(public dataService: DataService) {
       this.dataService.data = { userAge: 37  }
    }
}

and where you need to submit this data, just use the getter to collect it back.

let finalData = this.dataService.data;

Not sure about your use case. But I hope it might help you.