How to excute a function in x component from y component? - angular6

Question

I have a component alphabatesComponent. It has a method postLetters(). I want to call wordsComponent listOfAlphabates() method whenever I call postLetters() in alphabatesComponent.
// Service
private _listners = new Subject<any>();
constructor(private httpClient: HttpClient) { }
listen(): Observable<any> {
debugger;
return this._listners.asObservable();
}
filter(filterBy: string) {
debugger;
this._listners.next(filterBy);
}
// alphabates component
export class alphabatesComponent {
postLetters(): void {
this.asynService.filter('Register click');
}
}
// this is my words component
constructor() {
this.asyncService.listen().subscribe((m: any) => {
this.listOfAlphabates();
}
}
listOfAlphabates() {}
}

Answer 1

for state managment use rxJs:
in alphabates component:
filter () {
this.asynService.onFilterChanged.next('Registerclick');
}
in asynService:
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
public onFilterChanged: BehaviorSubject<any> = new
BehaviorSubject('');
in word component:
import {Subscription} from 'rxjs/Subscription';
private onFilterChanged: Subscription;
constructor(public asynService: AsynService,) {
this.onFilterChanged = this.asynService.onFilterChanged
.subscribe((filterBy) => {
this.listOfAlphabates(filterBy);
});
}
public ngOnDestroy(): void {
// note: Do not forget to unsubscribe!
this.onFilterChanged.unsubscribe();
}
listOfAlphabates(text) {
console.log(text);
}