Angular material table errors when using the example code off the angular material website

I've been trying to get a table working in my app, and I eventually tried using the very simple example table code they have on the website: https://material.angular.io/components/table/overview

But when I add this to my code, I get three errors.

Kind of ridiculous this is happening, surely their own example code should work with the latest versions of Angular.

And yes, before anyone asks, MatTableModule is imported in app.module

core.js:6156 ERROR TypeError: Cannot read property 'elementRef' of undefined
    at MatTable._applyNativeTableSections (table.js:2006)
    at MatTable.ngOnInit (table.js:1459)
    at callHook (core.js:2512)
    at callHooks (core.js:2483)
    at executeInitAndCheckHooks (core.js:2434)
    at selectIndexInternal (core.js:8370)
    at Module.ɵɵadvance (core.js:8353)
    at WizardComponent_Template (wizard.component.html:30)
    at executeTemplate (core.js:9499)
    at refreshView (core.js:9368)

(anonymous) @ main.js:1
core.js:6156 ERROR TypeError: Cannot read property 'diff' of undefined
    at MatTable.renderRows (table.js:1537)
    at SafeSubscriber._next (table.js:1856)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at TakeUntilSubscriber._next (Subscriber.js:72)
    at TakeUntilSubscriber.next (Subscriber.js:49)
    at Observable._subscribe (subscribeToArray.js:3)
    at Observable._trySubscribe (Observable.js:42)

zone-evergreen.js:171 Uncaught TypeError: Cannot read property 'classList' of null
    at StickyStyler._addStickyStyle (table.js:971)
    at table.js:934
    at SafeSubscriber._next (table.js:403)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at TakeUntilSubscriber._next (Subscriber.js:72)
    at TakeUntilSubscriber.next (Subscriber.js:49)
    at TakeSubscriber._next (take.js:35)

This is a bit grinding, because even their example code isn't working properly. I'm not doing anything out of the ordinary. Here's the code in my template and component.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>


import {Component} from '@angular/core';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

Angular versions

Angular CLI: 11.1.1
Node: 12.18.2
OS: win32 x64

Angular: 11.1.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.1
@angular-devkit/build-angular   0.1101.1
@angular-devkit/core            11.1.1
@angular-devkit/schematics      11.1.1
@angular/cli                    11.1.1
@angular/fire                   6.1.1
@schematics/angular             11.1.1
@schematics/update              0.1101.1
rxjs                            6.5.5
typescript                      4.1.3

Package versions

+-- @angular/animations@11.1.0
+-- @angular/cdk@11.1.0
+-- @angular/common@11.1.0
+-- @angular/core@11.1.0
+-- @angular/forms@11.1.0
+-- @angular/material@11.1.0
+-- @angular/platform-browser@11.1.0
+-- rxjs@6.6.3
`-- zone.js@0.11.3