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

Tips for retrieving next-auth authOptions from an asynchronous function

Tips for implementing <mat-progress-bar> in .ts file when making API service requests with Angular

The Angular Karma tests are failing because the custom tag is not recognized as a known element

Stop the MatSort feature from activating when the space key is pressed in Angular Material

Following the build in Angular, it only displays the index.html file and a blank screen

Flex mode allows for responsive row details in ngx-datatable

Issue with updating state in child component preventing addition to state

Navigating through an array's contents with RxJs

Implementing automatic selection for MUI toggle buttons with dynamic data

Guide on displaying toaster notifications using promises in Angular 2

The correct way to add to a string array that has been passed as props to a functional component

Traversing the enum's keys poses a challenge in terms of typing

Preview of Azure AD Consent Scopes and Access Token Version Error in Msal Angular

Adding dynamic row values to a bootstrap table in angular 4 - what's the best approach?

Learn how to restrict input to only specific characters in an input box using Angular2 and validations

Incorporate the Materialize framework into an Angular 2 project using webpack and SCSS styling

Utilize JSON Objects rather than JSON arrays when using JSON-SERVER

Even after importing the API key, I am still receiving the message "This domain is not registered with Tiny Cloud."

What causes an error during the compilation of an Angular package containing a singleton class?

HTTP request in Angular with specific body content and custom headers