Service variable when passing data from one component to another angular 2

Question

I am trying to pass a variable from one component to another. I am doing that by using a service:

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


    @Injectable()
    export class SharedService {
      // private questionNumber = new Subject<number>();
      // questionNumber$ = this.questionNumber.asObservable();
      questionNumber : number;
      publishData(number:number) {
        this.questionNumber = number;
        console.log(this.questionNumber,'publish');
      }

  getQuestionData(){
    console.log(this.questionNumber,'get');
    return this.questionNumber;
  }

  constructor() { }

}

If the data gets changed in the function "publishData" it writes the current variable value in the console:

But if I try to access that variable it is still undefined as if it isn't changed

Component 1 (excerpt) :

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-main-quiz',
  templateUrl: './main-quiz.component.html',
  styleUrls: ['./main-quiz.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [SharedService]
})
export class MainQuizComponent implements OnInit {

  constructor(private _sharedService: SharedService){
    this._sharedService = _sharedService;
  }

  updateQuestion(){
    this._sharedService.publishData(this.questionNumber);
  };

Component 2:

import { Component, OnInit, Input } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-win-page',
  templateUrl: './win-page.component.html',
  styleUrls: ['./win-page.component.css'],
  encapsulation: ViewEncapsulation.None,
  inputs: ['questionNumber'],
  providers: [SharedService]
})
export class WinPageComponent implements OnInit {

  constructor(private _sharedService : SharedService) {
    this._sharedService = _sharedService;
    this.questionNumber = this._sharedService.getQuestionData();
   }

  questionNumber : number;

  ngOnInit() {

  }

  ngOnChanges(){
    this.questionNumber = this._sharedService.getQuestionData();
  }

}

Why isn't that variable updated ?

Thanks for your help!

how do you call it? maybe you're getting the variable before it's set? — Max Koretskyi, Jun 22 '17 at 07:25
In my second component: ngOnChanges(){ this.questionNumber = this._sharedService.getQuestionData(); } — Snixells, Jun 22 '17 at 07:28
Can you share the component codes? (with their `@Component` annotation) — eko, Jun 22 '17 at 07:30
Possible duplicate of [Angular - shared service between components doesn't work](https://stackoverflow.com/questions/43997489/angular-shared-service-between-components-doesnt-work) — eko, Jun 22 '17 at 07:35
How did you get the output `1 "publish"`? From where you are setting the value? I mean from where you are calling the `updateQuestion` method of the service? Better add a plunker — Mr_Perfect, Jun 22 '17 at 07:38
The output 1 publish do I get after hitting a button in my first component. There the publishData() function gets called and outputs the "1 publish — Snixells, Jun 22 '17 at 07:41
Would it be better to delete the question because it has already been answered ? — Snixells, Jun 22 '17 at 07:50
@Snixells it would've been better if you've marked it as duplicate :-) but no problem if you have found your answer. — eko, Jun 22 '17 at 07:51
@Snixells https://meta.stackexchange.com/questions/79916/is-it-possible-to-mark-my-own-question-as-duplicate-of-another — eko, Jun 22 '17 at 07:54
@Snixells how about https://meta.stackexchange.com/questions/250981/new-ui-encourages-askers-to-confirm-or-dispute-duplicate-votes — eko, Jun 22 '17 at 07:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147341/discussion-between-snixells-and-echonax). — Snixells, Jun 22 '17 at 08:02

score 2 · Accepted Answer · edited Jun 22 '17 at 08:10

As already answered here: Angular - shared service between components doesn't work

Each component has :

providers: [SharedService]

So based on the angular DI Hierachy the service will be available only for the current component. In your case that mean each components will have his own instance (service isolation).

If you want your component to share the same instance you need to declare the provider at the module level.

Service variable when passing data from one component to another angular 2

1 Answers1