Angular2 – Interaction between components using a service

by

Shared service is a common way of communication between non-related components.
Your components need to use a single instance of the service, so make sure it’s provided at the root level.

An example using the BehaviorSubject as a data delegate:

Shared service:

@Injectable()
export class SharedService {

    isVisibleSource: BehaviorSubject<boolean> = new BehaviorSubject(false);

    constructor() { }
}

Component 1:

export class Component1 {

    isVisible = false;

    constructor(private sharedService: SharedService) { }

    onClick(): void {
        this.isVisible = !this.isVisible;
        this.sharedService.isVisibleSource.next(this.isVisible);
    }
}

Component 2:

export class Component2 {

    constructor(private sharedService: SharedService) { }

    ngOnInit(): void {
        this.sharedService.isVisibleSource.subscribe((isVisible) => {
            console.log('isVisible: ', isVisible); // => true/false
        });
    }
}

It is worth mentioning that BehaviorSubject upon a subscription returns the last value it holds, therefore the component from the example above will be updated with the most recent value immediately after the instantiation.

BehaviorSubject also allows to get its most recent value without even subscribing to it:

this.sharedService.isVisibleSource.getValue(); // => true/false

More Related Contents:

  1. How do I create a singleton service in Angular 2?
  2. ‘router-outlet’ is not a known element
  3. Angular 2 Scroll to top on Route Change
  4. Angular 2 unit testing components with routerLink
  5. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  6. How do I detect user navigating back in Angular2?
  7. Angular2 router keep query string
  8. How to call component method from service? (angular2)
  9. Pass config data using forRoot
  10. Multiple canActivate guards all run when first fails
  11. Getting Image from API in Angular 4/5+?
  12. Lazy Loading BrowserModule has already been loaded
  13. Pass parameter into route guard
  14. Property ‘toPromise’ does not exist on type ‘Observable’
  15. Angular 2: 404 error occur when I refresh through the browser [duplicate]
  16. How to switch layouts in Angular2
  17. How to extend / inherit components?
  18. Angular 2 input parameters on root directive [duplicate]
  19. Unit testing click event in Angular
  20. Tracking scroll position and notifying other components about it
  21. Avoiding relative paths in Angular CLI
  22. Angular 4: How to read data from Excel?
  23. Sanitize input in Angular2 [duplicate]
  24. Subscribe to observable is returning undefined
  25. New Angular2 router configuration
  26. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  27. Angular routerLink does not navigate to the corresponding component
  28. How to return observable from subscribe
  29. How to mock Angular 4.3 httpClient an error response in testing
  30. Angular 6 – how to mock router.events url response in unit test

Leave a Comment