Angular - Service data not passed between component

Question

I'm coming to you totally desperate ... Since 1 day, I try to pass data between my two component using a service.

I've already use this service in another application and I know that it's work.

But I've try all the things that I've found with Googling : BehaviorSubject, Subject ... But nothing work in my case : The value is changed in the service thanks to the first component, but nothing happens in the second component, even if I'd subscribe to the value in service.

The second component get the value on init, but nothing after ...

Good to know : The second component is the parent of the first component.

This is my code (Actually) :

GlobalFn.Service :

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

@Injectable({
  providedIn: 'root',
})
export class globalFnService{
    id:any;
    activeDeepView = new Subject<boolean>();
    constructor() { 
      this.activeDeepView.next(false);
     }

    deepView(){
      this.activeDeepView.next(!this.activeDeepView);
    }

    getValue(): Observable<any> {
        return this.activeDeepView.asObservable();
    }

}

First component (Child) :

import { Component, OnInit } from '@angular/core';
import { globalFnService } from '../services/globalFn.service';

@Component({
  selector: 'app-profil',
  templateUrl: './profil.component.html',
  styleUrls: ['./profil.component.scss'],
  providers: [globalFnService]
})
export class ProfilComponent implements OnInit {

  constructor(
    private globalFn:globalFnService
  ) { 

   }

  deepView(){
    this.globalFn.deepView();
    console.log("clicked !");
  }

  ngOnInit() {
    this.globalFn.getValue().subscribe(value => {
      if(value == true){
        console.log("status",value);
      } else {
        console.log("status",value);
      }
    })
  }

}

The second component (The parent one) :

import { Component, OnInit } from '@angular/core';
import { globalFnService } from '../services/globalFn.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomeComponent implements OnInit {



  constructor(
    private globalFn:globalFnService
  ) { 
    this.subscription = this.globalFn.getValue().subscribe(value => {
      if(value == true){
        console.log("status",value);
      } else {
        console.log("status",value);
      }
    }) 
   }

}

If you can find where I do a mistake, you are in capacity to save my day ...

Thank you !

have must have to provide service in module providers: [globalFnService] — Santosh Shinde
– Santosh Shinde, Commented Apr 11, 2020 at 6:30
I've forget to add it in my app.module.ts ... I'll try to add it and I come to you ! — Younes Yaas
– Younes Yaas, Commented Apr 11, 2020 at 6:34

Prashant Pimpale · Accepted Answer · 2020-04-11 06:49:03Z

1

While sharing data between components, what you all need is to create a service and register it in the parent module (which will work as a singleton instance), so that can available across all the components:

Change that needs to apply:

app.module.ts:

import { globalFnService } from '../services/globalFn.service'; // imports

providers: [
   ...,
   globalFnService
]

No need to add the reference to any other places: (in other component's provider's array).

edited Apr 11, 2020 at 6:49

answered Apr 11, 2020 at 6:46

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Evan Ogra Over a year ago

Adding the service to the providers here is also unnecessary, since the service itself is decorated with ` providedIn: 'root'`

Prashant Pimpale Over a year ago

@EvanOgra yes, Check it

Younes Yaas Over a year ago

Thank you, but even if I have providedIn:'root' it's not work until I import it in my app.module.ts in providers ...

Prashant Pimpale Over a year ago

@EvanOgra At one point, I was also shocked! Unable to reproduce. Am I missing something?

ShamPooSham Over a year ago

@PrashantPimpale You have Angular v5 installed in your stackblitz, which doesn't support the providedIn syntax

|

Evan Ogra · Accepted Answer · 2020-04-11 06:31:39Z

1

When you put providers: [globalFnService], you are telling Angular to instantiate a fresh globalFnService and inject it into the component, rather than inject the existing instance of the service. Remove that from the component and it should work.

answered Apr 11, 2020 at 6:31

Evan Ogra

2063 silver badges11 bronze badges

2 Comments

Hitech Hitesh Over a year ago

dont remove it from a component it should be present there also

Evan Ogra Over a year ago

@HitechHitesh No, it should not. The service is decorated as providedIn: 'root'. It should not be added to any providers (unless you want a different instance of that service).

Collectives™ on Stack Overflow

Angular - Service data not passed between component

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related