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?;
}
}
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
The question does not ask component interaction, it asks for calling a component method from a service.
This simply can be achieved by injecting service to the component. Then define a method inside the service which takes a function as parameter. The method should save this function as a property of service and call it wherever it wants.
// -------------------------------------------------------------------------------------
// codes for component
import { JustAService} from '../justAService.service';
@Component({
selector: 'app-cute-little',
templateUrl: './cute-little.component.html',
styleUrls: ['./cute-little.component.css']
})
export class CuteLittleComponent implements OnInit {
s: JustAService;
a: number = 10;
constructor(theService: JustAService) {
this.s = theService;
}
ngOnInit() {
this.s.onSomethingHappended(this.doThis.bind(this));
}
doThis() {
this.a++;
console.log('yuppiiiii, ', this.a);
}
}
// -------------------------------------------------------------------------------------
// codes for service
@Injectable({
providedIn: 'root'
})
export class JustAService {
private myFunc: () => void;
onSomethingHappended(fn: () => void) {
this.myFunc = fn;
// from now on, call myFunc wherever you want inside this service
}
}
as this post is a bit old, I actualize the response of Tudor the stackblitz
the service
private customSubject = new Subject<any>();
customObservable = this.customSubject.asObservable();
// Service message commands
callComponentMethod(value:any) {
this.customSubject.next(value);
}
the main-component
constructor(private communicationService:CommunicationService){}
ngOnInit()
{
this.communicationService.customObservable.subscribe((res) => {
this.myFunction(res)
}
);
}
myFunction(res:any)
{
alert(res)
}
Another component that call to the method of the service
constructor( private communicationService: CommunicationService ) { }
click() {
this.communicationService.callComponentMethod("hello word");
}
callComponentsMethodmethod in to a service and then inject the service to both places