I am receiving data from firebase server in chunks while rendering that data requires a library which insists on observable contains Array. I am somehow unable to push a new data chunk to existing data chunk array contained by observable,
From dataservice I am calling by subject's next and trying to add a new calEvent
this.homeWorkerService.eventSubject.next(calEvent);
In component, I have following code
events$: Observable<Array<CalendarEvent<any>>>;
and ngOnInit, I am supplying data to it like
this.events$ = this.service.eventSubject.asObservable();
Could you please suggest any way by which I can add a new event to observable which already hold my events.
PS : I am using this lib to render calendar and using remoteDB to render events.
Thanks,
Subscribinglink An Observable instance begins publishing values only when someone subscribes to it. You subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications. Returns an Observable instance that synchronously delivers the values provided as arguments.
Observable is a Generic, Observables are lazy collections of multiple values over time. BehaviorSubject: A Subject that requires an initial value and emits its current value to new subscribers. is technically a sub-type of Observable because BehaviorSubject is an observable with specific qualities.
In comparison to a regular Observable, a Subject allows values to be multicasted to many Observers. A Subject and its subscribers have a one-to-many relationship. A Subject can be an Observable as well as an Observer. They hold a registry of many listeners to multiple Observables.
To use Observable in our Angular application. we need to import it as following. import { Observable } from 'rxjs/Observable'; Observable provide support for passing messages between publishers and subscribers in your application.
Your subject here is an array of CalendarEvent, you have to pass an array of CalendarEvent in next() method. I would recommand to use a BehaviorSubject in your case. Here is a short example:
import { Component } from '@angular/core';
import { Observable, BehaviorSubject, of } from 'rxjs';
import { take } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
obsArray: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
array$: Observable<any> = this.obsArray.asObservable();
constructor() {
}
ngOnInit() {
this.addElementToObservableArray('It works');
}
addElementToObservableArray(item) {
this.array$.pipe(take(1)).subscribe(val => {
console.log(val)
const newArr = [...val, item];
this.obsArray.next(newArr);
})
}
}
You can see a live example here: Stackblitz.
Hope it helps!
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