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,
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!
In addition to GeoAstronaute's answer, here's how I would remove stuff from the array:
removeElementToObservableArray(idx) {
this.array$.pipe(take(1)).subscribe(val => {
const arr = this.subject.getValue()
arr.splice(idx, 1)
this.subject.next(arr)
})
}
I.E: your ngforloop in the HTML could have the let i = index, which would provide an index to the data you wanted to remove. Secondly, the remove function has to be inside the ngforloop tag :-)
