How can I set an Angular component as content for GridStack widget?

Question

I am using GridStack (NPM) to build a dashboard in my Angular project. I want to dynamically set Angular components as GridStack widgets. I currently trying it this way, which doesn't work:

widget.component.ts

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

@Component({
  selector: 'app-widget',
  template: '<span>Widget (Angular Component)</span>',
})
export class WidgetComponent {}

demo.component.ts

import { Component, OnInit } from '@angular/core';
import { GridStack } from 'gridstack';

@Component({
  selector: 'app-demo',
  template: '<div class="grid-stack"></div>',
})
export class DemoComponent implements OnInit {
  ngOnInit() {
    const grid = GridStack.init();
    grid.load([
      {
        content: '<app-widget />',
      },
      { content: '<span>Widget (Native)</span>' },
    ]);
  }
}

This results in:

Of course, the browser doesn't know how to render <app-widget />. So, <app-widget /> should be somehow pre-rendered here, in order to work. I tried it with DomSanitizer (from @angular/platform-browser) but I get the same result.

The question is: Does anybody know a way of setting an Angular component as content in a GridStack widget within code?

Thanks!