Update: I have been messing with this for quiet awhile now and can now see the column names but data is still only showing in the API call.

I am trying to display this data in a table, everything ive seen so far that has had this issue is because the displayColumns value wasnt correct. That isnt my problem here, I dont think, so im wondering what else I am missing here.

Something to note is the data is reaching my front end from my database and i can see it in my network tab, so i know the data is making "available"

Here is my markup:

view-workouts works!
 
 

        
        
        


    
Exercise Number
        
{{ entry.exerciseId }}
    

    
Exercise Name
        
{{ entry.ExerciseName }}
    

    
Muscle Group
        
{{ entry.MuscleGroupId }}
    
    
    

    

This is my ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { IExercises } from 'src/app/models/IExcercises';
import { WorkoutService } from '../../services/workout.services'
import { MatPaginator} from '@angular/material/paginator';
import { Subscription } from 'rxjs';
import { MatSort, MatTableDataSource } from '@angular/material';
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-view-exercise',
  templateUrl: './view-exercise.component.html',
  styleUrls: ['./view-exercise.component.css']
})
export class ViewExerciseComponent implements OnInit {
  errorMessage: string;
  isLoadingData = true;

  private subs = new Subscription
  private dataArray: any;

  dataSource: MatTableDataSource;
  displayedColumns = ['exerciseId','exerciseName','muscleGroupId'];
  @ViewChild(MatPaginator, { static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  constructor(private workoutService: WorkoutService) { }

  ngOnInit() { 
    this.subs.add(this.workoutService.getExercises()
    .subscribe((res) =>
      {
        this.dataSource = new MatTableDataSource(this.dataArray);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      (error: HttpErrorResponse) => {
        console.log(error);
      }));
   }

   ngOnDestroy() {
     if (this.subs) {
       this.subs.unsubscribe();
     }
   }
}