Tips on using services for storing and fetching list data in Angular

Question

Tips on using services for storing and fetching list data in Angular

I currently have two components, the "add-expense" component and the "view-list" component. The "add-expense" component collects expense details from a form and stores them as an object. My goal is to add this object to an empty list within the "expense-list" service. When I later load my "view-list" component, all the values in the list maintained by the "expense-list" service should be displayed.

I've read about using rxjs BehaviorSubject for this purpose. However, most examples demonstrate how to store and update strings using .next(). In my case, I need to work with a list.

import { BehaviorSubject } from "rxjs";
export class ExpenseListService{
    expenseList:BehaviorSubject<any[]> = new BehaviorSubject([]); //error
    
}

How do I define a BehaviorSubject that takes a list as its type? How can I add/push elements to this list maintained by the BehaviorSubject? And how do I subscribe to changes?

angular typescript rxjs

Answer 1

Answer №1

It's strange that you're encountering an error with that code because it runs smoothly on my end. Check out the code here

If you have a behavior subject containing an array and you need to add a new value to it, you can utilize the spread operator to create a new array with the additional item.

export class ExpenseListService{
  expenseList:BehaviorSubject<any[]> = new BehaviorSubject([]);
    
  add(item) {
    this.expenseList.next([...this.expenseList.value, item]);
  }
}

This action will trigger the behavior subject to emit a fresh array inclusive of the newly added value.

Answer 2

It's strange that you're encountering an error with that code because it runs smoothly on my end. Check out the code here

If you have a behavior subject containing an array and you need to add a new value to it, you can utilize the spread operator to create a new array with the additional item.

export class ExpenseListService{
  expenseList:BehaviorSubject<any[]> = new BehaviorSubject([]);
    
  add(item) {
    this.expenseList.next([...this.expenseList.value, item]);
  }
}

This action will trigger the behavior subject to emit a fresh array inclusive of the newly added value.

Answer 3

Answer №2

When you initialize a variable with an assertion, there is no need to explicitly set the type as it will be determined by the value you provide.

For example, you can simply write:

expenseList = new BehaviorSubject([]);

However, it is considered best practice to specify the type of the array like so:

expenseList = new BehaviorSubject<ListModel[]>([]);

If you want to append data to the existing array, you should do it as follows:

const newValue = 'new value';
const newContent = [...this.expenseList.getValue(), newValue];

this.expenseList.next(newContent)

To subscribe to the observable:

 expenseList.asObservable().subscribe(() => ....)

Answer 4

When you initialize a variable with an assertion, there is no need to explicitly set the type as it will be determined by the value you provide.

For example, you can simply write:

expenseList = new BehaviorSubject([]);

However, it is considered best practice to specify the type of the array like so:

expenseList = new BehaviorSubject<ListModel[]>([]);

If you want to append data to the existing array, you should do it as follows:

const newValue = 'new value';
const newContent = [...this.expenseList.getValue(), newValue];

this.expenseList.next(newContent)

To subscribe to the observable:

 expenseList.asObservable().subscribe(() => ....)

Answer 5

Answer №3

Edit: AdrianBrand's Solution is more concise and appropriate, and I recommend using it

If my understanding is correct, you are looking to:

add a single object from the "add-expense" component to an array
subscribe to an observable in your "view-list" and retrieve the array containing all previously added values?

Using a BehaviourSubject as you suggested may not be effective, as it would result in emitting a new array each time and losing the previously added values.

I believe a straightforward store approach would be most suitable: (Caution: This method only appends values to the list if the observable is subscribed to.)

export class ListService {
  // No initial value:
  private expenseListSubject: Subject<any> = new Subject<any>();
  // The empty initial array:
  private initialList = [];

  // Pass the emitted subject values through scan to accumulate them:
  public expenseList$: Observable<any[]> = this.expenseListSubject.pipe(
    scan((acc: any[], currentValue: any) => ([...acc, currentValue]), this.initialList)
  );
  
  public addToList(value: any) {
    this.expenseListSubject.next(value)
  }
}

To subscribe in your component:

export class ViewList {
  constructor(private listService: ListService) {}
  
  this.listService.expenseList$.subscribe((currentArray) => console.log(currentArray))
  }

To append a new value:

export class AddExpense {
  constructor(private listService: ListService) {}

  this.listService.addToList(value)
  }

Answer 6

Edit: AdrianBrand's Solution is more concise and appropriate, and I recommend using it

If my understanding is correct, you are looking to:

add a single object from the "add-expense" component to an array
subscribe to an observable in your "view-list" and retrieve the array containing all previously added values?

Using a BehaviourSubject as you suggested may not be effective, as it would result in emitting a new array each time and losing the previously added values.

I believe a straightforward store approach would be most suitable: (Caution: This method only appends values to the list if the observable is subscribed to.)

export class ListService {
  // No initial value:
  private expenseListSubject: Subject<any> = new Subject<any>();
  // The empty initial array:
  private initialList = [];

  // Pass the emitted subject values through scan to accumulate them:
  public expenseList$: Observable<any[]> = this.expenseListSubject.pipe(
    scan((acc: any[], currentValue: any) => ([...acc, currentValue]), this.initialList)
  );
  
  public addToList(value: any) {
    this.expenseListSubject.next(value)
  }
}

To subscribe in your component:

export class ViewList {
  constructor(private listService: ListService) {}
  
  this.listService.expenseList$.subscribe((currentArray) => console.log(currentArray))
  }

To append a new value:

export class AddExpense {
  constructor(private listService: ListService) {}

  this.listService.addToList(value)
  }

Tips on using services for storing and fetching list data in Angular

Answer №1

Answer №2

Answer №3

Similar questions

The callback function `(err: any, data: any) => void` does not share any properties with the type `RequestInit`

Example of Using Bluebird in a Chain of Catch and Then Functions

Navigate back to the main page using a tab

"Implementing a retry feature for Angular http requests triggered by a button

Create a function that accepts a class as a parameter and outputs an object of that class

Error: 'ngForOf' is not recognized as a valid property of the 'tr' element

Using RxJS switchMap in combination with toArray allows for seamless transformation

Angular - Is there a specific type for the @HostListener event that listens for scrolling on the window?

Error: Virtual script not located; possibly absent <script lang="ts" / "allowJs": true / within the jsconfig.json.volar

Aurelia's navigation feature adds "?id=5" to the URL instead of "/5"

Is your Express router failing to handle post requests properly?

Error: Unable to modify a property that is marked as read-only on object '#<Object>' in Redux Toolkit slice for Firebase Storage in React Native

The connection could not be established due to an error, and there was also a failure in loading the resource with the error message "net::ERR

Steps for generating an instance of a concrete class using a static method within an abstract class

React textarea trigger function on blur event

What is the best way to share type definitions between a frontend and a Golang backend application?

Ways to expand a TypeScript interface and make it complete

Optimal Method for Inserting Lengthy Data using Sequelize

VS Code using Vue is displaying an error message stating: The property '' does not exist on type '{}'.ts(2339)

Automatically identify the appropriate data type using a type hint mechanism