TypeError: cannot read property of undefined - angular 12

It's supposed to display the categories list data from the database of the backend into a table in the frontend. but, no data has been displayed yet, because of this error.

categories-list.component.ts :

import { Component, OnInit } from '@angular/core';
import { CategoriesService, Category } from '@bluebits/products';

@Component({
  selector: 'admin-categories-list',
  templateUrl: './categories-list.component.html',
  styles: []
})
export class CategoriesListComponent implements OnInit {

  categories: Category[] = []

  constructor(private categoriesService: CategoriesService) { }

  private getCategories() {
    this.categoriesService.getCategories().subscribe( (data:any) => {
      this.categories = data.categories
      console.log(data)
    })
  }

  ngOnInit(): void {
    this.getCategories()
  }
}

categories.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Category } from '../models/category';

@Injectable({
  providedIn: 'root'
})

export class CategoriesService {

  apiMainUrl= "http://localhost:3000/api/v1"

  constructor(private http: HttpClient) { }

  getCategories(): Observable<Category[]> {
    return this.http.get<Category[]>(`${this.apiMainUrl}/categories`)
  }
}

categories-list.html

 <ng-template pTemplate="body" *ngFor="let category of categories" let-category>
        <tr>
            <td>{{category.id}}</td>
            <td>{{category.name}}</td>
            <td>{{category.icon}}</td>
        </tr>
 </ng-template>