'What to use to store dropdown values which is fetched from api?

I am very new to Angular and learning a lot here. I have a very small application, mostly doing crud operations. In this I have a around 10 to 15 dropdowns for which the values will come from DB through api. I have read about Subject, BehaviourSubject, NgRx store etc. I am really confused to know which one to use to store the dropdown values and use them across the application. I want to consider one scenario, when multiple users use this and if someone updates any of this dropdown values in the backend, it should reflect for the other users.

<mat-form-field appearance="outline">
            <mat-label>Group</mat-label>
            <mat-select
              disableRipple
              formControlName="group"
              (opened)="getGroups()"
              [formControlName]="'group'"
              required
            >
              <mat-option></mat-option>
              <mat-option *ngFor="let g of groups" [value]="g.id">{{
                g.groupName
              }}</mat-option>
            </mat-select>
          </mat-form-field>

constructor(
    private refService: ReferenceService
  ) {}
    ngOnInit(): void {
    this.refService.GroupList$.subscribe((res: any) => {
      console.log('subscribed', res);
    });
  }

Service

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { GroupService } from './group.service';

@Injectable({
  providedIn: 'root',
})
export class ReferenceService {
  public GroupList$: any;

  constructor(private groupService: GroupService) {
    this.getGroups();
  }

  getGroups() {
    this.groupService.getAll().subscribe({
      next: (res) => {
        console.log('call made to api', res);
        this.GroupList$ = res;
      },
      error: (err) => {
        console.log('Error getting List', err);
      },
    });
  }
}

By this i am getting the groups from service.. now my question is, if i want to reuse this Groups dropdown in other forms, should i have this code GetGroups in that form or can i have a global object created so that when the application is loaded, all these dropdown values are loaded into a dictionary or observables..



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source