CODEWITHSUNDEEP
angulartypescriptangular2-routing
Mistu
Mistu

Reputation: 154

How to send Array/list/JSON between 2 components Angular 2 by routing?

I have no idea how to make it good. I want to send JSON between 2 Angular Components. I thinking about routing but how to send something like POST between this, to components i know how to use @inputs/@Outputs , but i have to change Url and reload content. The problem is it is not only id but list of check ides.

Component

  selectedAll = [];// it is array od Id [1,2,3,4...];
  goToDetail(): void {
    this.selectedIDService.saveIds(this.selectedLight);
    console.log( "Show: "+this.selectedIDService.retrieveIDs().length); <-- give me good number

    this.router.navigate(['/detailSearch']);
  }

HTML button nothong intresting

<button  class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown"  (click)="gotoDetail()">

Of course i want to get this on my detailSearch component.

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

@Injectable()
export class SelectedIdService {

  public myIds: Array<Number>=[];
  constructor() { }

  saveIds(produIds:any){
    this.myIds = produIds;
    console.log(this.myIds);
  }
  retrieveIDs():any[]{
    return this.myIds;
  } 
}

--------Other component-------

 providers : [SelectedIdService]
constructor( private route: ActivatedRoute,
               private  selectedIdService :SelectedIdService) { }
  ngOnInit() {
     var selected:any[] =this.selectedIdService.retrieveIDs();<<-- empty
}

do u know why?

Upvotes: 0

Views: 1519

Answers (2)

Shashank
Shashank

Reputation: 407

Send JSON between 2 Angular Components, you need to use a provider service. official docs

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

Use a service to save the array of ids from one component to other component. It's not a safe way to pass it over the url.

Create a service like this,

import { Injectable } from '@angular/core';
@Injectable()
export class AppMessageQueuService {

    myIds: Array<Number>=[];
    constructor() {

    }
    saveIds(produIds:any){
        this.myIds = produIds;
    }
    retrieveIDs(){
        return this.myIds;
    }

}

Then you can inject this Service into both the components and save it from the first component like,

this.appMsgService.saveIds(yourIds);

then retrieve in the second component as,

this.appMsgService.retrieveIDs(yourIds);

you can inject to your component as,

constructor(
   private appMsgService: AppMessageQueuService
)

Upvotes: 2

Related Questions