title: Using a service to share data between 2 components not working
body: <p>Below is my <code>project.service.ts</code></p>
  
  <pre><code>import {Injectable} from '@angular/core';
  
  @Injectable()
  
  export class ProjectService {
      public profskills_value = " Test ";
  }
  </code></pre>
  
  <p>From <code>component1.ts</code> I am assigning <code>profskills_value</code> variable a value as shown below:</p>
  
  <pre><code>....
  export class ProfskillsPage {
  
    constructor(public service: ProjectService , public navCtrl: NavController, public navParams: NavParams) {
  
    }
  
  save(){
    this.service.profskills_value = this.skills;
    console.log(this.service.profskills_value);
  }
  ...
  </code></pre>
  
  <p>Now when I try to read the value from <code>component2.ts</code> in console log, it shows me <code>Test</code> and not the one I assigned from <code>component1.ts</code> .</p>
  
  <p>What am I doing wrong?</p>
  
  <h2>Edit 1</h2>
  
  <p>Copying my complete ts files below:</p>
  
  <p><code>profskills.ts</code> where i am assigning the value</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
  import { ProjectService } from '../project.service';
  
  /**
   * Generated class for the ProfskillsPage page.
   *
   * See http://ionicframework.com/docs/components/#navigation for more info
   * on Ionic pages and navigation.
   */
  //@IonicPage()
  @Component({
    selector: 'page-profskills',
    templateUrl: 'profskills.html',
    providers: [ProjectService]
  })
  export class ProfskillsPage {
  
    skills='';
  
    constructor(public service: ProjectService , public navCtrl: NavController, public navParams: NavParams) {
  
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad ProfskillsPage');
    }
  
  
  save(){
    //console.log(this.skills);
  
    this.service.profskills_value = this.skills;
    console.log(this.service.profskills_value);
  }
  
  }
  </code></pre>
  
  <p><code>pinfo.ts</code> where I am trying to read the value, but result is coming the hardcoded value in service which is <code>test</code> and not the assigned value from <code>profskills.ts</code></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
  import { ProjectService } from '../project.service';
  
  /**
   * Generated class for the ProfskillsPage page.
   *
   * See http://ionicframework.com/docs/components/#navigation for more info
   * on Ionic pages and navigation.
   */
  //@IonicPage()
  @Component({
    selector: 'page-profskills',
    templateUrl: 'profskills.html',
    providers: [ProjectService]
  })
  export class ProfskillsPage {
  
    skills='';
  
    constructor(public service: ProjectService , public navCtrl: NavController, public navParams: NavParams) {
  
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad ProfskillsPage');
    }
  
  
  save(){
    //console.log(this.skills);
  
    this.service.profskills_value = this.skills;
    console.log(this.service.profskills_value);
  }
  
  }
  </code></pre>