Add mat-grid-tiles to mat-grid-list via ng-content

Question

I'm trying to create a grid component that extends the angular material grid-list component (which will be in a library for re-use)

I want the user to add the grid tiles in via their code.

So I create a basic grid component with this html:

<mat-grid-list cols="4" rowHeight="100px">
  <ng-content></ng-content>
</mat-grid-list>

and a basic grid item component with this html:

<mat-grid-tile [colspan]="2" [rowspan]="2">
  <ng-content></ng-content>
  Test 1 - from grid item
</mat-grid-tile>

I then want the user to add a grid item with the component like this:

  <app-grid>
    <app-grid-item>Test</app-grid-item>
    <app-grid-item>Test 2</app-grid-item>
  </app-grid>

But I can't seem to get the grid tiles to render.

This is a simplified version of my code but it demonstrates the problem.

How can I get the grid tiles to render via ng-content (or any other way)?

I have a basic setup here on StackBlitz:

Example

Thanks