angular - How to call component method from service? (angular2)

Question

I want to create service, which can interact with one component. All another components in my app, should be able to call this service, and this service should interact with this component.

How to call component method from service?

@Component({
  selector:'component'
})
export class Component{

  function2(){ 
    // How call it?
  }
}

From this servive?

@Injectable()

export class Service {


  callComponentsMethod() {
    //From this place?;
      }
}

Answer 1

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