Angular2 passing variables between component and service

Question

I am trying to better understand passing values between a component and a service in Angular 2.

My main.service

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

@Injectable()
export class MainService {
    private mainSource = new Subject<boolean>();
    main$ = this.mainSource.asObservable();

    private textSource = new Subject<string>();
    text$ = this.textSource.asObservable();

    setWorking(isWorking:boolean){
        this.mainSource.next(isWorking);
    }

    setTexting(isTexting:string){
        this.textSource.next(isTexting);
    }
}

My app.component

import { Component, OnInit } from '@angular/core';
import { MainService } from './main.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    private subscription: Subscription;
    private textres: string;
    constructor(private mainService: MainService){}

    ngOnInit(){
        this.subscription = this.mainService.main$.subscribe(isWorking =>{
            if (isWorking){this.mainService.setTexting("Yeah");}
        });
        this.mainService.setWorking(true);
        this.textres = this.mainService.setTexting;
    }

}

I have a mainSource, which is a boolean, and is subscribed by my component. This works well. Now, I would like to pass string values in between my component and service through textSource.

During Init I have set the value of setTexting('Yeah') but I do not know how to call it in my component's textres.

How might I acquire the value of this.mainService.setTexting?

Md Ayub Ali Sarker · Accepted Answer · 2016-10-31 19:56:55Z

1

your code to access the value of setTexting would be

export class AppComponent implements OnInit {
    private subscription: Subscription;
    private textres: string;
    constructor(private mainService: MainService){}

    ngOnInit(){
        this.subscription = this.mainService.main$.subscribe(isWorking =>{
            if (isWorking){this.mainService.setTexting("Yeah");}
        });
        this.mainService.setWorking(true);

      // access to setTexting value 
      this.mainService.text$.subscribe(value =>{
            this.textres= value;
        });
    }
}

answered Oct 31, 2016 at 19:56

Md Ayub Ali Sarker

11.6k5 gold badges27 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

abrahamlinkedin Over a year ago

I must be missing something. For whatever reason your code does not do anything.

abrahamlinkedin Over a year ago

Nvm. Got it. I moved setWorking to the bottom.

Md Ayub Ali Sarker Over a year ago

can you make MainService line var text$ = function(){ return this.textSource;} and try

Collectives™ on Stack Overflow

Angular2 passing variables between component and service

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related