1

i'm catching a data from a component and i'm trying to send it to another component via a service

Component1 (Start) : radio box View

                <md-radio-button
                    *ngIf="item.id===1"
                    value="{{item.value}}"
                    class="{{item.class}}"
                    checked="{{item.checked}}"
                    (click)="onSelectType1(item)"> //here i'm catching the value
                {{item.label}}
            </md-radio-button>

ts code

public  onSelectType1(selected:any){
        this.formeService.type1Change(selected.nb)
}

SERVICE :

@Injectable()
export class FormeService{
public type1S : any;

public  type1Change(selected):any

{

    this.type1S=selected;  //here i'm catching it into the service

 }

Component 2 : (End) : Simple View

ts code

export class ContentComponent{

constructor(public BackService : BackgroundService ,
                public formeService: FormeService)
    {
        console.log(this.formeService.type1S) 



////// that diplays me in the console that it's undefined !!!!!!!!!!!!!!!!! 


The probleme is HERE : how may i access to the value of my variable in this part 



}

!!!!!!!! and in the same time in the view it displays me the value:

{{formeService.type1S}}  // this works normally

who may tell me how can i display the value of my data in the "end component ts code" ?????

firasKoubaa
  • 6,439
  • 25
  • 79
  • 148
  • If you don't think this is a duplicate add a comment to get it reopened. – Günter Zöchbauer Apr 04 '16 at 17:24
  • the problem is how to re use the value of my data in the ts code not in the view , using subjects can pass data and display it in the views but here the context is how to display it from the part of the code – firasKoubaa Apr 04 '16 at 17:28
  • The part with `.subscribe(` is to get notified about changes of values in the service in TypeScript. – Günter Zöchbauer Apr 04 '16 at 17:29
  • this.formeService.type1S.subscribe( type =>this.testVariable= type); console.log(this.testVariable) =======> Undefined – firasKoubaa Apr 04 '16 at 17:31
  • in the same time : in the view {{testVariable}} works perfectly – firasKoubaa Apr 04 '16 at 17:32
  • `{{testVariable}}` is checked repeatedly by Angular whether the value has changed and then updates the view. In TS you need to take care of this yourself. When you subscribe after the last value was emitted, the subscriber won't get any updates. – Günter Zöchbauer Apr 04 '16 at 17:33
  • @GünterZöchbauer this is my problem sir , what's the best alternative , or at least how can i deal with it , i need to use the value in the ts part of my code – firasKoubaa Apr 04 '16 at 17:35
  • https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service – Eric Martinez Apr 04 '16 at 17:57

1 Answers1

2

A full example Plunker

import {Injectable, Component, Directive} from 'angular2/core'
import { BehaviorSubject } from 'rxjs/subject/BehaviorSubject';
import 'rxjs/Rx';

@Injectable()
export class FormeService {
  public type1S$:BehaviorSubject<number> = new BehaviorSubject<number>(null);

  // when new values are set notify subscribers
  set type1S(value:number) {
    this.type1S$.next(value);  
  }
}

@Component({
  selector: 'content-comp',
  template: `
<div>{{value}}</div>
`})
export class ContentComponent {
  value:number;

  constructor(public formeService: FormeService) {
    // subscribe to updates
    this.formeService.type1S$.subscribe(val => {
      this.value = val;
    });
  }
} 

@Component({
  selector: 'other-comp',
  template: `
<button (click)="clickHandler()">count</button>
`})
export class OtherComponent {
  counter:number = 0;
  constructor(private formeService: FormeService) {}

  // set new values      
  clickHandler() {
    this.formeService.type1S = this.counter++;
  }
} 

@Component({
  selector: 'my-app',
  providers: [FormeService],
  directives: [ContentComponent, OtherComponent]
  template: `
  <h2>Hello {{name}}</h2>
  <content-comp></content-comp>
  <other-comp></other-comp>
`
})
export class App {

}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • thanks a lot for the answer and for precious help, but i don't know if the problem persist , cauz in this plunker if i wanna display the value of "valu" inside the content-component , it will gonna display null (the first value) even after 2 or 3 clicks – firasKoubaa Apr 04 '16 at 21:37
  • console.log(this.value); // null ALWAYS (INSIDE CONTENT-COMPONENT) – firasKoubaa Apr 04 '16 at 21:38
  • Did you check the Plunker (link at the top of my answer)? The content component shows the updated value. – Günter Zöchbauer Apr 05 '16 at 04:41
  • yeah i did it , just put a console.log a the bottom of the content-comp and check the navigator console , it will display "null" even it works perfectly in the template view – firasKoubaa Apr 05 '16 at 07:34
  • Can you please update my plunker to show what you did? – Günter Zöchbauer Apr 05 '16 at 07:40