How to call component method from service? (angular2)

by

Interaction between components can be indeed achieved using services. You will need to inject the service use for inter-component communication into all the components which will need to use it (all the caller components and the callee method) and make use of the properties of Observables.

The shared service can look something like this:

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

@Injectable()
export class CommunicationService {

  // Observable string sources
  private componentMethodCallSource = new Subject<any>();
  
  // Observable string streams
  componentMethodCalled$ = this.componentMethodCallSource.asObservable();

  // Service message commands
  callComponentMethod() {
    this.componentMethodCallSource.next();
  }
}

Example:

Sender:

callMethod = function () {
   this.communicationService.callComponentMethod();
}

Receiver:

this.communicationService.componentMethodCalled$.subscribe(() => {
      alert('(Component2) Method called!');
});

I have created a basic example here, where clicking on a button from Component1 will call a method from Component2.

If you want to read more on the subject, please refer to the dedicated documentation section: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

More Related Contents:

  1. How do I create a singleton service in Angular 2?
  2. Angular2 – Interaction between components using a service
  3. Testing – Can’t resolve all parameters for (ClassName)
  4. Pass config data using forRoot
  5. Getting Image from API in Angular 4/5+?
  6. ng2 – dynamically creating a component based on a template
  7. Property ‘toPromise’ does not exist on type ‘Observable’
  8. How do I pass data to Angular routed components?
  9. How can I get new selection in “select” in Angular 2?
  10. Ionic 2 – global NavBar for the app
  11. Angular: How to correctly implement APP_INITIALIZER
  12. Angular 2 – 2 Way Binding with NgModel in NgFor
  13. Using multiple instances of the same service
  14. No provider for HttpClient
  15. Argument of type ‘string | null’ is not assignable to parameter of type ‘string’. Type ‘null’ is not assignable to type ‘string’
  16. How do I detect user navigating back in Angular2?
  17. Access environment variables in production build Angular 4
  18. Generic email validator
  19. Detect changes in objects inside array in Angular2
  20. Lazy Loading BrowserModule has already been loaded
  21. Angular 2 input parameters on root directive [duplicate]
  22. Angular 2: How to use JavaScript Date Object with NgModel two way binding
  23. Angular 2 – Services consuming others services before call a method
  24. want to show more data in another component when view in detail button is clicked (angular 6)
  25. Tracking scroll position and notifying other components about it
  26. ERROR in TypeError: Cannot read property ‘flags’ of undefined
  27. Sanitize input in Angular2 [duplicate]
  28. Subscribe to observable is returning undefined
  29. Page transition animations with Angular 2.0 router and component interface promises
  30. Angular load external configuration before AppModule loads

Leave a Comment