Get Updated value of an bool data

Question

I am using angular 2. i made a service and i want to perform a simple task just like , i made object of service at in two components. at where component1 change the bool value to true at i want to use that value as it is in component2. same as vice versa.

My Service is:

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


@Injectable()
export class JwtService {

   appStatus:boolean=false;


  setStatus(value){
    debugger;

    this.appStatus = value;

  }
  getStatus(){


    return this.appStatus;
  }



}

At My component 1:

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

import { JwtService} from '../shared/services/jwt.service';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [JwtService ]
})
export class AppComponent {





appStatus: boolean = false; 
 constructor( private jwtService:JwtService) { }


 public Func() :any{


      this.jwtService.setStatus(false);


    }

}

At My component 2:

import { Component, OnInit } from '@angular/core';
import { JwtService} from '../services/jwt.service'
@Component({
  selector: 'layout-header',
  templateUrl: './header.component.html',
  providers: [JwtService]
})

export class HeaderComponent implements OnInit {
    appStatus: boolean ; 
  constructor(  private jwtservice:JwtService

  ) { 
this.appStatus=jwtservice.getStatus();

   }

 setout()
{



  this.jwtservice.setStatus(true);


}



}

Just want to get changed value of appstatus presented at service.

Answer 1

It seems that you are not very familiar with RxJS. You can transform appStatus to Subject which you can subscribe to. Basically, you pass callback to Subject which gets called every time value changes. Subject.next(value) is used to set new value.

Note : You MUST unsubscribe from subject when component gets destroyed. This will prevent memory leaks and undefined behavior.

Service:

@Injectable()
export class JwtService {
   appStatus = new BehaviorSubject<boolean>();
}

Both components:

export class HeaderComponent implements OnInit, OnDestroy {
  private _sub: Subscription;
  private _currentStatus: boolean = false;
  constructor(private service:JwtService) {}
  ngOnInit() {
    // We make subscription here. Behavior subject means that you will receive latest value on subscription and every next value when it is changed.
    this._sub = this.service.appStatus.subscribe((status) => this._currentStatus = status);
  }
  ngOnDestroy() {
    // IMPORTANT: UNSUBSCRIBE WHEN COMPONENT IS DESTROYED
    this._sub.unsubscribe();
  }
  setStatus(status: boolean) {
    this.service.appStatus.next(status);
  }
}

Answer 2

You can use behaviourSubject , reference can be found here .

What you should do is made appStatus in your service as a behaviourSubject . Then you will subscribe to its value from your component2. Now when you set its status in component1, component2 will detect the changed value and the function inside the subscription in component2 will be triggered.

Answer 3

Instead of providing service at component level, provide it at your module level. In this way your service will become singleton and changing the values at one component will be reflected in another component .

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
  ],

  providers: [JwtService],

  exports: [],
  bootstrap: [AppComponent]
})