Angular: Embedding custom angular components doesnt render the child nodes

[visualbuffer]

I was trying to embed a custom Angular component into the quill editor using the register API. Angular context exists outside of quill as a result inside the editor angular selectors are rendered however the child nodes (of the custom component) are not rendered.

Editor component

class CustomComponentModule extends blockEmbed {}
CustomComponentModule.blotName = 'image';
CustomComponentModule.tagName = 'content-figure';
Quill.register(CustomComponentModule);

Selector Tag:

@Component({
  selector: 'content-figure',
  template: '<h1>Do you see this?<h1>',
  styleUrls: [],
})

Expected behavior:

<div class="ql-editor" data-gramm="false" contenteditable="true" data-placeholder="Add case note here">
        <content-figure> 
            <h1>Do you see this?<h1>
        </content-figure>
        <p><br></p>
    </div>

Actual behavior: Rendered html in Quill editor on clicking image:

  <div class="ql-editor" data-gramm="false" contenteditable="true" data-placeholder="Add case note here">
        <content-figure> </content-figure>
        <p><br></p>
    </div>

Version: Angular 13, running quill1.3.7 Extract of package.json

  "@angular/animations": "^13.3.8",
  "@angular/cdk": "^13.3.7",
  "@angular/common": "^13.3.8",
  "@angular/core": "^13.3.8",
  "@angular/forms": "^13.3.8",
  "@angular/platform-browser": "^13.3.8",
  "@angular/platform-browser-dynamic": "^13.3.8",
  "@angular/router": "^13.3.8",
  "ngx-quill": "^16.2.1",
  "quill": "^1.3.7",
  "rxjs": "~7.5.5",
  "tslib": "^2.4.0",
  "zone.js": "^0.11.5"
}

[BobBDE]

Hello,

This issue should not be posted here but in stack overflow instead.

This is normal becasue quill can only render web components (and not angular component). You must make your component a web component, using angular element. See : https://angular.io/guide/elements

[visualbuffer]

Thanks for the pointer @BobBDE I was able to get it configured.