I have two components componentA and componentB. Both of them are sibblings, and are children of componentMother.
I want to make it such that when I click on a button on componentA, it triggers a function call on componentB.
Is the way to do this using a service with an observable and having componentA emit events that componentB subscribes to or is there a better/best practice way?
I would probably use a service that uses a Subject
. This way it can be both published to and subscribed from
import { Subject } from 'rxjs/Subject';
class SomeService {
private _subject = new Subject<any>();
newEvent(event) {
this._subject.next(event);
}
get events$ () {
return this._subject.asObservable();
}
}
The from your components, one can publish and one can subscribe
@NgModule({
providers: [ SomeService ]
})
class AppModule {}
@Component()
class ComponentOne {
constructor(private service: SomeService) {}
onClick() {
service.newEvent('clicked!');
}
}
@Component()
class ComponentTwo {
constructor(private service: SomeService) {}
ngOnInit() {
this.service.events$.forEach(event => console.log(event));
}
}
See also:
Use
RxJS SUBJECT (~EventEmitter):import { Subject } from 'rxjs/Subject'
;
Subject service will allow you to enable bi-directional communication for a parent component and its children.
Reference : https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service
For more details of
RxJs SUBJECT
check this one : https://www.youtube.com/watch?v=rdK92pf3abs
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With