How to share data between components using a service properly?

by

You can always just create a binding to a variable on a service from two different components. In this example one component increments a number and the other component displays the value

enter image description here

You won’t be able to detect and respond to changes with this approach. A more robust approach would be to use an observable to broadcast changes to the state in your service. e.g.

import {BehaviorSubject} from "rxjs/BehaviorSubject"

export class MyService {
    private state$ = new BehaviorSubject<any>('initialState');

    changeState(myChange) {
        this.state$.next(myChange);
    }

    getState() {
        return this.state$.asObservable();
    }
}

Then your components could subscribe to state changes and change the state by calling custom methods on the service. I have a concrete example of this approach here https://github.com/robianmcd/ng2-redux-demo/blob/redux-demo-with-service/app/user.service.ts

More Related Contents:

  1. Convert Promise to Observable
  2. How to create cross-domain request?
  3. Angular CLI SASS options
  4. Angular2 validator which relies on multiple form fields
  5. PowerShell script add ‘–prod’ argument to build Angular CLI project
  6. Property ‘map’ does not exist on type ‘Observable’
  7. Inject a service manually
  8. How to send “Cookie” in request header for all the requests in Angular2?
  9. How to disable a input in angular2
  10. Can an ng-content be used inside of an ngFor?
  11. When to use FormGroup vs. FormArray?
  12. mat-form-field must contain a MatFormFieldControl
  13. DI with cyclic dependency with custom HTTP and ConfigService
  14. Using Resolve In Angular2 Routes
  15. Get all validation errors from Angular 2 FormGroup
  16. Dynamically load HTML template in angular2
  17. unable to resolve dependency tree error for creating new angular project
  18. Property ‘controls’ does not exist on type ‘AbstractControl’ Angular 4 [duplicate]
  19. Angular 5 – Copy to clipboard
  20. Angular 4 checkbox change value
  21. Angular 7 – nesting Observables
  22. Pre-bootstrap loading screen
  23. Making sure observables in for loop are all finished before executing other code
  24. Cannot find name ‘require’ after upgrading to Angular4
  25. custom filter in mat-table
  26. How to globally set the preserveWhitespaces option in Angular to false?
  27. Best way to import Observable from rxjs
  28. How to make nested Observable calls in Angular2
  29. angular 6 warning for using formControlName and ngModel
  30. Angular 2 beta – Select not working (except in Chrome)

Leave a Comment