Resolved: Unwrapping a promise to get at data inside

{
    "timestamp":[2022,6,16],
    "status":"OK",
    "data": {
                "products": [{"product1":"Rake"},{"product2":"Hammer"},...]
            }
    
}

/**
 * Data source for the ProductTable view. This class should
 * encapsulate all logic for fetching and manipulating the displayed data
 * (including sorting, pagination, and filtering).
 */
export class ProductTableDataSource extends DataSource<ProductTableItem> {

  data: ProductTableItem[] = [];
  paginator: MatPaginator | undefined;
  sort: MatSort | undefined;
  errorMessage: string = '';

  constructor(private productService: ProductService) {
    super();
    this.productService.getProducts().subscribe({
      next: products => this.data = products,
      error: err => this.errorMessage = err
    });
  }

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private productUrl = 'back-end URL';

  constructor(private http: HttpClient) {
  }

  getProducts(): Observable<ProductTableItem[]> {
    return this.http.get<ProductTableItem[]>(this.productUrl).pipe(
      tap(data => console.log('All', JSON.stringify(data))),
      catchError(this.handleError)
    );
  }

export class ProductData {
  products?: ProductTableItem[]
}

export class ServerResponse<T> {
  timestamp: any;
  status: string;
  data: T;
}

getProducts(): Observable<ServerResponse<ProductData>> {
  return this.http.get<ServerResponse<ProductData>>(this.productUrl)
    .pipe(
      tap(data => console.log('All', JSON.stringify(data))),
      catchError(this.handleError)
    );
  }

this.productService.getProducts().subscribe({
    next: (response : ServerResponse<ProductData>) => this.data = response?.data?.products,
    error: err => this.errorMessage = err
  });