In an attempt to establish communication between three components on a webpage using a data service, I have a Create/Edit component for adding events, a "next events" component for accepting/declining events, and a Calendar component for displaying upcoming events.
The service maintains an array of events that should be visible to the other components. Any updates made to an event should be distributed to all components. I decided to utilize Rxjs's BehaviorSubject but encountered a roadblock. After creating a new event and handling all logic in the service component, the newly added event is not displayed unless I refresh the Calendar component.
Service component class
EXPORT CLASS eventService {
public Sevents = new BehaviorSubject<AgendaEvent[]>([]);
private eventsToManipulate;
constructor() {
this.getAllData();
}
getAllData() {
this.http.get(url).subscribe(data => {
// Mapping events from API to eventsToManipulate array
this.Sevents.next(eventsToManipulate);
})
}
addNewData(event) {
this.http.post(url, event).subscribe(
{
this.eventsToManipulate.push(event);
this.Sevents.next(this.eventsToManipulate);
});
}
}
View Component class
EXPORT CLASS eventView {
events = new Array<Events>();
ngOnInit() {
this.eventService .Sevents.subscribe( element => {
console.log('this is element', element);
this.events = element;
})
}
Based on my understanding of RXjs, the BehaviorSubject should notify all subscribers about new data immediately. However, my code does not seem to achieve this desired functionality.
Previously, I relied on event Emitters to repeatedly load data into components to achieve the desired effect. Now, I am seeking a more efficient implementation with RxJs.