Как отображать изменения компонента

Я получаю данные из бд, которые потом отображаю пользователю. Но я хочу, чтобы данные обновлялись, если в бд что-то меняется или пользователь как-то взаимодействует с объектом, ибо перезагружать страницу ради обновления данных компонента - противоречие SPA. Что нужно изменить в этом коде, чтобы это заработало? Компонент:

items:Observable<Items[]>;
  tt:Observable<number>
  constructor(private itemsService:ItemsService) {
    this.items = this.itemsService.items;
    this.tt = this.itemsService.totalSum;

  }


  ngOnInit(): void {
    this.itemsService.getItems();
    this.itemsService.getTotalSum();
  }

Сервис:

items:BehaviorSubject<Array<Items>> = new BehaviorSubject<Array<Items>>([]);
  totalSum:BehaviorSubject<number> = new BehaviorSubject<number>(0);
 getItems():any{
    this.httpClient.get<Users>(`${environment.apiUrl}/User`).pipe(
      mergeMap((id) => this.httpClient
        .get<Array<Items>>(`${environment.apiUrl}/${this.url}/Items/${id.id}`)
      ))
      .subscribe((result)=>this.items.next(result));
  }
  getTotalSum():any{
    this.httpClient.get<Users>(`${environment.apiUrl}/User`).pipe(
      mergeMap((id) => this.httpClient
        .get<number>(`${environment.apiUrl}/${this.url}/TotalSum/${id.id}`)
      )).subscribe((res)=>this.totalSum.next(res));
  }

HTML:

<div *ngFor="let items of items | async">
  <p>{{items.name}}</p>
  <p>{{items.price}}</p>
</div>
<div>
  <p>{{totalSum}}</p>
</div>