CODEWITHSUNDEEP
angulartypescript
Arvind Chourasiya
Arvind Chourasiya

Reputation: 17412

Data not passing between components using Service

I want to pass values from one Components to another but my code not working. Values on next page showing undefined.

This is my service class UtilityService.ts

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

@Injectable
({
  providedIn: 'root'
})

export class UtilityService {
  constructor() { }

  private message:string;

  public setMessage(message):void{

      this.message=message;
  }

  public readMessage():string {

      return this.message;
  }
}

This is my first component code

import { Component, OnInit } from '@angular/core';
import { UtilityService } from '../UtilityService';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css'],
  providers: [UtilityService]
})
export class ProductsComponent implements OnInit {
  private service;

  constructor(private employeeService: ProductService,utilityService: UtilityService) {

    this.service=utilityService;
    this.sendMessage();
  }

  private sendMessage():void {
    this.service.setMessage("h r u");
  }
}

This is my Second Component code

import { Component } from '@angular/core';
import { UtilityService } from '../UtilityService';

@Component({
  selector: 'app-device-list',
  templateUrl: './device-list.component.html',
  styleUrls: ['./device-list.component.css'],
  providers: [UtilityService]
})

export class DeviceListComponent implements OnInit {

  private service;
  private message:string;

  constructor(
    utilityService: UtilityService,
    private restApi: ProductService,
    private route: ActivatedRoute
  ){

    this.service=utilityService;
    this.readMessage();
  }

  private readMessage():void {
       this.message=this.service.readMessage();
       console.log("service msg: "+this.message);
    }
}

I have followed this article. In console.log message showing undefined

Upvotes: 0

Views: 378

Answers (4)

vanrado
vanrado

Reputation: 348

You defined your service with providedIn: 'root', which means that instance of service will exists in whole context of application. If was that your goal just delete providers: [UtilityService] definition from DeviceListComponent and ProductsComponent, then it will be okey and works.

But I recommend you to read official documentation about Angular providers from official Angular Docs. There is explanation about providedIn: 'root', and other ways how to provide Angular service.

I have to mention guide about Angular Component Interaction, here you can learn different ways how to pass data between components.

Upvotes: 1

Mohammad Niazmand
Mohammad Niazmand

Reputation: 1547

You have provided your service in the level of components.It means that each of your components have a different instance of UtilityService service.You should provide your service in the module that has included your components to its declarations array.

An example code:

@NgModule({
  imports: [
     ],
  declarations: [DeviceListComponent,ProductsComponent 
  ],

  providers: [UtilityService],
})
export class ProductModule {}

Upvotes: 8

Oron Bendavid
Oron Bendavid

Reputation: 1533

You need to remove: providers: [UtilityService] from ProductsComponent and from DeviceListComponent as it creates a new instance of UtilityService instead of using a singleton.

Upvotes: 4

Nitika
Nitika

Reputation: 479

Use BehaviourSubject in UtilityService.

msgSource = new BehaviorSubject<any>('');
currentMsg = this.msgSource.asObservable();

In firstComponent to setMessage use BehaviourSubject's next()

this.service.msgSource.next("Your message");

In secondComponent subscribe to currentMsg

this.service.currentMsg.subscribe(msg=> {
  //TODO
}

Upvotes: 0

Related Questions