Angular subscribe cannot read properties of undefined at interval

I'm trying to automatically update a mat-table every five seconds. Upon first loading the site, the getDrinks() method of the PrijslijstComponent works without issue and loads the table.

When calling it from the interval every five seconds after initial loading though, it gives the following error:

There were a few posts on this type of errors, but nothing which seemed to solve my problem. I tried to do a console log inside the getDrinksByGroup() method, but nothing at all gets executed there, it seems, before throwing the error.

I'm wondering where I'm going wrong as the first getDrinks() call works, but none after that. Also, I'm not sure if this is how I should update the mat-table regularly?

prijslijst.component.ts

import { Component } from '@angular/core';
import {MatTableDataSource, MatTableDataSourcePaginator} from '@angular/material/table';
import { DrinksService } from '../drinks/drinks.service';
import { Drink } from '../drinks/drink';

@Component({
  selector: 'app-prijslijst',
  templateUrl: './prijslijst.component.html',
  styleUrls: ['./prijslijst.component.css']
})
export class PrijslijstComponent {
  private alcohols: Drink[] = [];
  private nonAlcohols: Drink[] = [];
  private interval: any;
  dataSourceAlcohol!: MatTableDataSource<Drink, MatTableDataSourcePaginator>;
  dataSourceNonAlcohol!: MatTableDataSource<Drink, MatTableDataSourcePaginator>;
  displayedColumns: string[] = ['name', 'startPrice', 'currentPrice', 'numberSold'];

  constructor(private drinksService: DrinksService) { 
  }

  ngOnInit(): void {
    this.getDrinks();
    this.interval = setInterval(this.getDrinks, 5000);
  }


  ngOnDestroy() {
    if (this.interval) {
      clearInterval(this.interval);
    }
 }

  getDrinks() {
    console.log('Getting drinks')
    this.drinksService
        .getDrinksByGroup()
        .subscribe(({alcohols, notAlcohols}) => {
          if(alcohols !== undefined) {
            this.alcohols = alcohols;
          }
          if(notAlcohols !== undefined) {
            this.nonAlcohols = notAlcohols;
          }
          this.dataSourceAlcohol = new MatTableDataSource(this.alcohols);
           this.dataSourceNonAlcohol = new MatTableDataSource(this.nonAlcohols);
    });
  }

  addOrder(drink: Drink) {
    drink.numberInOrder = drink.numberInOrder + 1;
  }
}

drinks.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, Observable, of } from 'rxjs';
import { Drink } from './drink';

@Injectable({
  providedIn: 'root'
})
export class DrinksService {
  constructor(private http:HttpClient) { }

  private url: string = 'http://localhost:3000/drinks';
  drinks: Drink[] = [];

  setupDrinks(): void {
    this.getDrinks().subscribe(drinks => {
      drinks.forEach(drink => this.drinks.push(drink))
    });
  }

  getDrinks(): Observable<Drink[]> {
    console.log('Getting drinks from backend')
    return this.http.get<Drink[]>(this.url);
  }

  getDrinksByGroup(): Observable<{alcohols: Drink[], notAlcohols: Drink[] }> {
    return this.getDrinks().pipe(map(drinks => {
      const alcoholDrinks: Drink[] = [];
      const notAlcoholDrinks: Drink[] = [];
      
      drinks.forEach(drink => {
        if(drink.alcohol) {
          alcoholDrinks.push(drink);
        } else {
          notAlcoholDrinks.push(drink)
        }
      });
      

      return { alcohols: alcoholDrinks, notAlcohols: notAlcoholDrinks };
    }));
  }

  setSoldOut(drinkName: string) {
    this.drinks.filter((drink) => {
      if(drink.name === drinkName) {
        drink.soldOut = true;
      }
    })
  }

  setDrinks(drinks: Drink[]) {
    this.drinks = drinks;
  }

}

Your issue is on this line:

this.interval = setInterval(this.getDrinks, 5000);

Just replace it by:

this.interval = setInterval(() => this.getDrinks(), 5000);

and it will work

The problem here is in this object. Thats why you got undefined value.

Basically when setInterval callback fires, it will go in getDrinks function but this object in that function is not what you think it is.

You can either do something like:

// Explicitly bind `this` object to the scope that you want (component)
this.interval = setInterval(this.getDrinks.bind(this), 5000);

or :

// Arrow function automatically bind `this` object to its lexical (wrapping scope)
this.interval = setInterval(() = this.getDrinks(), 5000);

Or do it in a "right" way, and that is to use reactive approach (rxjs is for that) such as:

  destroy$ = new Subject();
ngOnInit() {
// Trigger timer each 5seconds (with 0 as first argument it will trigger first time without delay)
timer(0, 5000)
.pipe(
// Call your service
switchMap(_ => this.drinksService.getDrinksByGroup()),
// Unsubscribe on ngDestroy
takeUntil(this.destroy$))
.subscribe((result) => {
}
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}