I'm currently working with a component structure that looks like this:
Component A -> Component B -> Component C
Within the template of Component C, there is a button that triggers a function in the 'code behind' when clicked.
My goal is to have a function in Component A called every time the function in Component C is executed. Component A acts as the Grandparent of Component C.
While one option would be to pass an EventEmitter down to Component B and then to Component C, I prefer not to do so.
I have attempted the following approach:
SharedService.ts
@Injectable()
export class SharedService{
private subject = new BehaviorSubject<any>(null);
constructor() {}
valueClicked() {
console.log('Value Clicked has been called');
this.subject.next({});
}
getValue(): Observable<any> {
return this.subject.asObservable();
}
}
ComponentC.ts Method
public buttonClicked(): void {
this.sharedService.valueClicked();
}
ComponentA.ts ngOnInit
public ngOnInit(): void {
this.subscription = this.sharedService.getValue().subscribe(message => {
console.log('Function Called');
});
}
It was my expectation that each time the function in Component C is called, Component A would log 'Function Called'. However, this does not seem to be happening.