Demonstration of Global Data Sharing

Demonstration of Global Data Sharing

In the following, we have an angular 4 application where we have two countries with same currency but the components for this these two countries lie in two different modules in our angular application complete with their complete separate routings and views.

So we cannot have our service inside these individual modules as their scope will be limited to those modules.

Hence we need to inject our service into a module which lies in higher in the general hierarchy and then referencing it our individual components of our two countries.

Hence we need to create a service and refer it our app.module.ts which is our outermost module in this current application.

Let us name our service global.service.ts for sake of simplicity.

We will define proper references for the both our submodules inside our app-routing.constant.ts .

You can find all the necessary code used in this application included inside the source which will be linked in this article.

All the while let’s include the following code inside our app.module.ts

import { GlobalCurrencyService } from './global.service';
providers: [GlobalCurrencyService],

In our service global.service.ts let’s just define a simple code to just set and get a currency.

import { Injectable, Directive } from '@angular/core';
@Injectable()
export class GlobalCurrencyService {
    private currency;
    constructor() { }
    setCurrency(val) {
        this.currency = val;
    }
    getCurrency() {
        return this.currency;
    }
}

Now let’s write the a simple set and get code inside our global.service.ts

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

@Injectable()
export class GlobalCurrencyService {
    private currency: string;
  
    constructor() { }

    setCurrency(val) {
        this.currency = val;
    }

    getCurrency() {
        return this.currency;
    }
  }

After this let us include the reference for this services in both our components which are included in different modules and their respective views.

For ind.component.ts:

import { Component, Injectable, Directive } from '@angular/core'
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/Rx';
import { GlobalCurrencyService } from '../../global.service';


@Component({
    selector: 'app-root',
    templateUrl: "/INDView/IND"

})
@Injectable()

export class INDCurrencyComponent {
    private indCurrency: string = null;
    private itemList: any;
    constructor(private currencyService: GlobalCurrencyService) {
        this.indCurrency = this.currencyService.getCurrency();
        this.itemList = this.currencyService.getList();
    }

    SetGlobalData() {
        this.currencyService.setCurrency(this.indCurrency);
    }
    Save() {
        this.itemList.push({ "item": this.indCurrency });
        this.currencyService.setList(this.itemList);
    }
}

For views:

<label>
    <input type="text" [(ngModel)]="indianCurrency" value="" (ngModelChange)="SetGlobalData()" />
    <input type="button" value="Save" (click)="Save()" />
</label>
{{val}}

For np.component.ts:

import { Component, Injectable, Directive } from '@angular/core'
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/Rx';
import { GlobalCurrencyService } from '../../global.service';


@Component({
    selector: 'app-root',
    templateUrl: "/NPView/NP"

})
@Injectable()

export class NPCurrencyComponent {
    private nepaliCurrency: string = null;
    private itemList: Array = new Array();
    constructor(private currencyService: GlobalCurrencyService) {
        this.nepaliCurrency = this.currencyService.getCurrency();
        this.itemList = this.currencyService.getList();
    }
    SetGlobalData() {
        this.currencyService.setCurrency(this.nepaliCurrency);
    }
    Save() {
        this.itemList.push(this.nepaliCurrency);
        this.currencyService.setList(this.itemList);
   
    }
}

For views:

<label>
    <input type="text" [(ngModel)]="nepaliCurrency" value="" (ngModelChange)="SetGlobalData()"  />
    <input type="button" value="Save" (click)="Save()" />
</label>
{{val}}

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Mariano

I'm Ethan Mariano a software engineer by profession and reader/writter by passion.I have good understanding and knowledge of AngularJS, Database, javascript, web development, digital marketing and exploring other technologies related to Software development.