Angular 6 + RxJS 6.0 : How to push new element to array contained by Observable

Question

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 dat

Answer 1

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 :-)

Answer 2

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!