How can I add elements to a reactive array in Angular 2?

Question

How can I add elements to a reactive array in Angular 2?

I have a system in place that retrieves documents and displays their metadata on a web page without any issues. However, I am looking to incorporate an "infinite scrolling" feature. After some research, I came across npm i angular2-infinite-scroll

Currently, I am using an observable for the documents and leveraging the async pipe within an *ngFor loop

document-list.ts

export class DocumentList implements OnInit {
    documents: Observable<Array<Document>>;
    chunck: number = 100;
    from: number = 0;
    keyword: string = "";

    constructor(private _documentService: DocumentService) {}

    ngOnInit() {
    this.documents = this._documentService.getDocuments(this.chunck, this.from, this.keyword);
    }
}

Using angular2-infinite-scroll, I have implemented a function that triggers when I reach the bottom of the page. My goal is to load more documents and display their metadata alongside the existing ones

onScroll() {
this.from = documents.length ... ?
//this.documents = this._documentService.getDocuments(this.chunck, this.from, this.keyword);
}

I'm uncertain if this approach is feasible with an observable. If I switch to using a simple array for documents like documents: Document[], I could potentially do something similar to

onScroll() {
this._documentService.getDocuments(this.chunck, this.from, this.keyword)
    .subscribe(documents => this.documents.push(documents));
}

Open to other suggestions or ideas?

angular typescript angular2-services angular2-observables

Answer 1

Answer №1

If you want to experiment with using a Subject instead of an Observable, one approach could be...

Here is an example for your DocumentsService:

import { Subject } from 'rxjs/Rx';

export class DocumentService {
  _documentSubject = Subject.create();

  getNextTen() {
    // ... retrieve the document meta data here ... 
    this._documentSubject.next(documentMetaData);
  }

  get documentSubject() {
    return this._documentSubject;
  }

  //...
}

Then, in your documents component, you would implement it as follows:

 // ...
documents: Array = [];
documentRetriever: Subject<any>;

constructor(ds: DocumentService) {
  //Ideally, avoid doing this within the constructor, but the key point is
  //to subscribe to the Subject only once.
  this.documentRetriver = ds.documentSubject;
  this.documentRetriever.subscribe(newDocuments => {
    this.documents.push(newDocuments);
  })
}
onScroll() {
  this.ds.getNextTen();
}

Due to how RxJS Subjects function (serving as both Observables and Observers), you can pass data via .next() even after the Observable has been created.

You may still need to consider using the async pipe when binding to the documents array.

For further information on Subjects:

ReactiveX Docs

Getting started with RxJS: Subjects

Answer 2

If you want to experiment with using a Subject instead of an Observable, one approach could be...

Here is an example for your DocumentsService:

import { Subject } from 'rxjs/Rx';

export class DocumentService {
  _documentSubject = Subject.create();

  getNextTen() {
    // ... retrieve the document meta data here ... 
    this._documentSubject.next(documentMetaData);
  }

  get documentSubject() {
    return this._documentSubject;
  }

  //...
}

Then, in your documents component, you would implement it as follows:

 // ...
documents: Array = [];
documentRetriever: Subject<any>;

constructor(ds: DocumentService) {
  //Ideally, avoid doing this within the constructor, but the key point is
  //to subscribe to the Subject only once.
  this.documentRetriver = ds.documentSubject;
  this.documentRetriever.subscribe(newDocuments => {
    this.documents.push(newDocuments);
  })
}
onScroll() {
  this.ds.getNextTen();
}

Due to how RxJS Subjects function (serving as both Observables and Observers), you can pass data via .next() even after the Observable has been created.

You may still need to consider using the async pipe when binding to the documents array.

For further information on Subjects:

ReactiveX Docs

Getting started with RxJS: Subjects

How can I add elements to a reactive array in Angular 2?

Answer №1

Similar questions

Troubleshooting issues with exporting Excel in Angular 2

Steps to fix the issue of 'Property 'foo' lacks an initializer and is not definitely assigned in the constructor' while utilizing the @Input decorator

What is the best way to extract value from an `observable<void>`?

How can I ensure that PrimeNG is functioning properly?

Guide on creating a TypeScript function that extracts specific properties from an object using a filter criteria

Transfer the value of a form field within the current object

Step-by-step guide to designing a basic pagination/carousel using div elements in HTML and Angular 2

Is there a way to modify the format received from the backend Angular REST API?

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

Error in ReactJS VSCode while integrating Cypress testing: The name 'cy' cannot be found

Learn how to easily set a radio button using Angular 4 and JavaScript

Adjusting linear gradient when the color picker is modified

Having trouble injecting HttpClient in a hybrid AngularJS/Angular app that has been upgraded with ngUpgrade? You may come across the error message "NullInjectorError: No provider for http_HttpClient!"

Ways to trigger an Angular function once and persist it even after the component is reloaded

Having trouble with installing the angular-4-data-table-bootstrap-4 package in NG 4.4.6 environment

What are some effective ways to exclude multiple spec files in playwright?

Edge fails to access Webservice from file:/// host

Adjust the size of every card in a row when one card is resized

Include a log out option in the side menu of the ionic2 application

Accessing Properties or Methods in Angular2 Components