I am currently developing an Angular 2 beta9 application where I am trying to establish communication between two components. I have a "start" component that consists of a radio box button, and the selected item is supposed to be transferred as an object via a service to the "destination" component. The "destination" component will then use this selected item to filter the data it uses.
The issue I'm facing is with passing the object from the "start" component to the service:
FormeService.ts:44
Object {id: 1, submenu: "type1", nb: 102, value: "Porte Fenêtre", class: ""…}
However, when trying to pass the object from the service to the "destination" component, the object appears as undefined: undefined
This is my code:
Start component:
@Component({
selector: 'radioFormesType1',
templateUrl: 'component1.html',
styleUrls: ['component1.css'],
directives: [MATERIAL_DIRECTIVES]
})
export class RadioFormesType1Component implements OnInit, OnDestroy{
// Initial value for the radio box
data: any = {init: 'Fenêtre'};
// List parsed from the service
items_list;
constructor(public formeService: FormeService) {}
ngOnInit(){
this.formeService.getjson().subscribe(people => this.items_list = people);
}
ngOnDestroy(){}
public onSelectType1(selected:any){
console.log("Selected value: "+selected.value);
this.formeService.changeForme(selected);
console.log("Selected value passed to service: "+selected.value);
}
}
The action of clicking is triggered by onSelectType1():
<div *ngFor="#item of items_list">
<md-radio-button
*ngIf="item.id===1"
value="{{item.value}}"
class="{{item.class}}"
checked="{{item.checked}}"
(click)="onSelectType1(item)">
{{item.label}}
</md-radio-button>
</div>
</md-radio-group>
The service acquires this object and places it in a new object named "type1". Here is the code of my service loading JSON data by default:
import {Injectable,EventEmitter,Output} from 'angular2/core';
import {Http} from "angular2/http";
import 'rxjs/add/operator/map';
@Injectable()
export class FormeService{
private _type1:any;
get type1():any {
return this._type1;
}
set type1(value:any) {
this._type1 = value;
}
constructor (public http : Http){
this.http= http;
}
getjson(){
return this.http.get('dev/JsonData/formes.json')
.map(res => res.json())
}
public changeForme(selected):any{
console.log(selected);
this._type1=selected
console.log("Service storing type1 value: "+this._type1);
return this._type1;
}
Lastly, in the "destination component," the object seems to be undefined at this level when placed in a new object named type1Recu:
@Component({
selector: 'checkboxFormesType2',
templateUrl: 'component2.html',
styleUrls: ['component2.css'],
directives: [MATERIAL_DIRECTIVES,RadioFormesType1Component]
})
export class CheckboxFormesType2 {
items_list;
public type1Recu: any;
constructor(public formeService: FormeService) {
this.type1Recu = this.formeService.type1 ;
console.log(this.formeService.type1)
}
ngOnInit(){
this.formeService.getjson().subscribe(people => this.items_list = people);
}
ngOnDestroy(){}
Any suggestions on how to successfully load the complete object in the destination component?