CODEWITHSUNDEEP
angularangular2-services
Kumail Hussain
Kumail Hussain

Reputation: 879

Angular2 Data Service Component not receiving value on Other components

currently I am using Shared services to pass data from one component into other i set the value on first component and trying to retrieve value on other end, but I am receiving empty array here is my code:

**Ist Compnent:**

        @Component({
        templateUrl: './landingPage.component.html',
        styleUrls: ['./landingPage.component.css'],
        providers: [LandingService],

    })

    export class LandingPageComponent {
        constructor(private landingService:LandingService) {

        }
     @Input() Location:string;
        @Input() Type:string;

        search(){
            //setting value in landing service
            this.landingService.SearchData[0]=this.Location;
            this.landingService.SearchData[1]=this.Type;
            console.log(this.landingService.SearchData) ///this print the data succesfully but when try to access on
// 2nd compnent receive and empty arrat

            }

2nd Component

@Component({
    templateUrl: 'find.component.html',
    styleUrls: ['find.component.css'],
  providers: [find,LandingService]

})


export class IndexComponent implements  OnInit {
       searchData:Object=[];


     constructor(private landingService: LandingService) {
         }          
         ngOnInit() {
          this.searchData=this.landingService.SearchData; .// getting data of my landing servie  that i have set in first component
          console.log(this.searchData);//getting empty array
         }

LandingService

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

@Injectable()
export class LandingService {
    SearchData:any=[];


}

Plus i checked using getter and setter but still facing the same issue can any one suggest me what i am doing wrong as I am setting data and console prints the right data that i want to receive on the 2nd component but ends with an empty array

Upvotes: 0

Views: 696

Answers (3)

Suraj Rao
Suraj Rao

Reputation: 29625

You have set LandingService as providers in both components. So it is not a singleton service. You should provide it in the app.module.ts

@NgModule({
  //declarations,imports etc
  providers: [LandingService]
})
export class AppModule { }

Upvotes: 4

snorkpete
snorkpete

Reputation: 14574

The issue has to do with your use of the 'providers' option in your component.

The short version:

remove the providers option from your two individual component decorators, and instead add it to your NgModule containing these components (or your AppModule).

Update your NgModule: 

@NgModule({
   imports: ...
   declarations: ....
   providers: [LandingService],   /// <- add this
})
export class ......

Update your components:

@Component({
    templateUrl: './landingPage.component.html',
    styleUrls: ['./landingPage.component.css'],
     ///providers: [LandingService],    // <-- remove this from BOTH components

 })

The long version:

When you add a service to the providers array of your component, you're basically saying to Angular, i want a new instance of this service for this component (and its children). So, in your example, you're basically telling Angular that you want two different objects of type LandingService, one for each of your components. And since they are two different instances/objects, they will each have their own data.

Check out the Angular docs for the dependency injection system to learn more

Upvotes: 7

eko
eko

Reputation: 40647

Your providers are not singletons. You are providing the service seperately in each component hence they have seperate instances of that service.

If the components are in the same module. Provide the service inside that modules (@NgModule) providers. If not make a shared service/module.

Example: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

Upvotes: 3

Related Questions