Angular Material MatTableDataSource not updated after redirecting from one component to another that also has a MatTableDataSource

Question

I have 2 Angular Modules:

• Student
• Course

Inside Course I have a Component (CourseListComponent) that I would like to show nested inside a Student component (StudentDetailsComponent). So I need to export that component from Course module:

@NgModule({
    declares [ CourseListComponent ],
    exports: [ CourseListComponent ]
})

Also I need to import Course module inside Student:

@NgModule({
    declares: [ StudentListComponent, StudentDetailsComponent ],
    imports: [ CourseModule ]
})

Inside of the StudentListComponent I have a MatTable with MatTableDataSource that has some data:

this.students = this.route.snapshot.data.students;
this.dataSource = new MatTableDataSource(this.students);

When i switch to StudentDetailsComponent I would like to show the list of the courses the student is enrolled in. I would also like to do that inside a MatTable:

this.courses = this.route.snapshot.data.courses;         // returns correct courses
this.dataSource = new MatTableDataSource(this.courses);  // changes filteredData

But when the page loads it shows just the empty table. I get no error in the console, just an empty table.

Does anyone have an idea how to fix this problem?

Thank you!

Here is the HTML:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" matSort>
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="aligned-columns">
            {{ 'COURSE-LIST.ID' | translate }}
        </th>
        <td mat-cell *matCellDef="let course"> 
            {{course.id}} 
       </td>
    </ng-container>
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ 'COURSE-LIST.NAME' | translate }}
        </th>
        <td mat-cell *matCellDef="let course">
            {{ course.name}}
        </td>
    </ng-container>
    <ng-container matColumnDef="year">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ 'COURSE-LIST.YEAR' | translate }}
        </th>
        <td mat-cell *matCellDef="let course"> 
            {{ course.year}} 
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</table>

In CourseListComponent:

displayedColumns: string[] = ['id', 'name', 'year'];
courses: ICourse[];

And the model:

export inteface ICourse {
    id: number;
    name: string;
    year: string;
}

Answer 1

Make sure the html is right. Are you dynamically generating the columns? make sure the column names are the same as courses fields. have you tried printing this.datasource after assigning it to courses?

do all of these first.

also a question, are these tables 2 separate tables in 2 separate components?

try

<pre>
  {{ dataSource.data | json }}
</pre>

before your table

your should see your data before the table.

it should look like:

[
  {
    "id": 1,
    "name": "fasdfa",
    "year": 1992
  },
  {
    "id": 2,
    "name": "fasdf",
    "year": 2002
  },
  {
    "id": 3,
    "name": "Hydrfasdfogen",
    "year": 2034
  },
  {
    "id": 4,
    "name": "fas",
    "year": 2004
  },
  {
    "id": 5,
    "name": "afsdafasd",
    "year": 2014
  },
]

if it doesn't have same structure that's the problem. or if its empty than you aren't supplying data correctly.