Angular – shared service between components doesn’t work

by

If you are providing your DataService inside the providers array of your @Component annotation,

@Component({
    ...
    providers: [DataService],
})...

this service will be a singleton (it will create a new instance) for this component (and it’s children if they have not provided this service under their annotation also).

If you want to use this service among multiple components and share the same instance of the service; you need to provide this service in a component/module which is the parent of these components in the DI tree. If this is a global service I suggest providing it only in your AppModule (or in a shared module).

@NgModule({
    providers:[DataService]
})

Source: https://angular.io/guide/dependency-injection#injector-hierarchy-and-service-instances

Angular 9 Update

Global level services are now defined as

@Injectable({
  providedIn: 'root',
})
export class DataService {

This should be the recommended approach since it will tree-shake itself if it’s unused.

Source: https://angular.io/guide/providers#providedin-and-ngmodules

More Related Contents:

  1. How to communicate between component in Angular?
  2. How to pass data between two components in Angular 2
  3. How to manage Angular2 “expression has changed after it was checked” exception when a component property depends on current datetime
  4. Use component in itself recursively to create a tree
  5. RxJS: takeUntil() Angular component’s ngOnDestroy()
  6. Access environment variables in production build Angular 4
  7. How can I communicate between two child components in angular? [duplicate]
  8. How to “communicate” between components in Angular?
  9. Adding / Removing components on the fly
  10. What is the difference between component and directive?
  11. Is it necessary to unsubscribe from observables created by Http methods?
  12. How to iterate object keys using *ngFor
  13. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  14. Global Events in Angular
  15. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  16. Angular 2 – Execute code when closing window
  17. Angular 2 Basic Authentication not working
  18. Angular – res.json() is not a function
  19. Property ‘json’ does not exist on type ‘Object’
  20. Error: Unexpected value ‘undefined’ imported by the module
  21. Update parent component property from child component in Angular 2
  22. ‘node-sass’ usage is deprecated and will be removed in a future major version
  23. Observable.of is not a function
  24. origin ‘http://localhost:4200’ has been blocked by CORS policy in Angular7
  25. How to Using a FormArray in a FormGroup
  26. How to validate white spaces/empty spaces? [Angular 2]
  27. Style html,body from web component (Angular 2)
  28. How to create variable in ngFor loop?
  29. Angular2 Routing – keeping state of component when route changes [duplicate]
  30. How to send 1000 XHTTP Requests with maximum number of parallel requests

Leave a Comment