How to bind service variable with component Angular 2?

Question

I have an variable: public tick:number; in service.

The service has injection of another service Timer. It is launched like as:

class Service {

constructor(public timer: TimerService)

}

public sendSmsExect(){
   // Main sending
}

public sendSms(){

    this.timer.run().subscribe((tick => { if(tick == 30) { sendSmsExect(); } }));

}

}

Component:

class MyComponent {

    public constructor(public service Service){}

    public sendSms(){
       this.service.sendSms();
    }

}

Problem: I need to get access to tick varaible in template:

{{tick}}

Do I really think that I need to subscribe to tick also in component and define the same variable tick:

public sendSms(){
   this.service.sendSms().subscribe((tick) => this.tick = tick );
}

score 4 · Accepted Answer · answered Jul 30 '17 at 11:32

4

You could consider sharing tick variable value from service using Subject observable. By making it observable you don't need to subscribe it an unwrap the value of tick from it. You need to use | async pipe on HTML, which will take care of unwrapping value of tick and displaying it on HTML.

Code

//don't miss below import
import { Subject } from 'rxjs/Subject';

class MyService {
  tick: Subject < number > ();
  constructor(public timer: TimerService) {}

  sendSmsExect() {
    // Main sending
  }
  tickObservable() {
    return this.tick.asObservable();
  }

  public sendSms() {
    this.timer.run().subscribe(tick => {
      this.tick.next(tick);
      if (tick == 30) {
        sendSmsExect();
      }
    );
  }
}

Component

//don't miss below import
import { Observable } from 'rxjs/Observable';

class MyComponent {
    tick: Observable<number>();
    public constructor(public service: MyService ){}

    sendSms(){
       this.service.sendSms();
    }
    ngOnInit(){
       this.tick = this.service.tickObservable();
    }
}

Html

{{tick | async}}

answered Jul 30 '17 at 11:32

Pankaj Parkar

134,766
23
234
299

@Daniel please refer to [this article](https://coryrylan.com/blog/angular-observable-data-services), there are many SO threads which you may find helpful :) – Pankaj Parkar Jul 30 '17 at 11:49
@Daniel about your solution, I'm still wondering, how `tick` value got available inside your component. Though the suggested way is preferred.. – Pankaj Parkar Jul 30 '17 at 11:51
Here I get syntax error: `tick: Subject < number > ();` – Daniel Jul 31 '17 at 10:39
Also where did you start: `this.timer.run()`? – Daniel Jul 31 '17 at 10:42
And another error: `TypeError: Cannot read property 'asObservable' of undefined at SmsService.tickObservable` – Daniel Jul 31 '17 at 10:53
@Daniel did you imported `Subject `? – Pankaj Parkar Jul 31 '17 at 11:00
Yes, now problem in this: `TypeError: Cannot read property 'asObservable' of undefined at SmsService.tickObservable` – Daniel Jul 31 '17 at 11:04
@Daniel `private tick: Subject ;` should be `private tick: Subject ();`, Refer [this answer](https://stackoverflow.com/a/45259268/2435473) to know why it wasn't working?' – Pankaj Parkar Jul 31 '17 at 11:35

How to bind service variable with component Angular 2?

1 Answers1

Linked