Как динамически создать угловой пользовательский элемент в ckeditor?

Question

Я пытаюсь динамически создать компонент для вставки на лету. По сути, когда пользователь нажимает на кнопку панели инструментов, я хочу, чтобы он вставил HTML-код для компонента встраивания в позицию курсора. Все хорошо, за исключением фактического получения самого HTML.

Это руководство, которому я следовал в документах

https://angular.io/guide/elements

в подразделе угловых элементов, может быть, я здесь использую не то. Но если у кого-то есть другие предложения, я хотел бы услышать.

Это код, ответственный за генерацию встраивания

    link(event)
    {
       const embed = document.createElement('embed-card')  as NgElement & WithProperties<{embedSrc: string}>;
       embed.embedSrc = 'https://github.com/itteco/iframely';
       console.log(embed);
       console.log(embed.innerHTML);
       this.myckeditor.instance.insertHtml(embed.innerHTML);
    }

Это сам компонент для вставки

@Component({
  selector: 'embed-card',
  templateUrl: './embed.component.html',
  styleUrls: ['./embed.component.css'],
  providers: [EmbedService]
})

export class EmbedComponent implements OnInit, OnChanges {

  @Input()
  embedSrc: string;
  embedData: any[];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private embedService: EmbedService
  ) { }

  getEmbedJsonData() {
    this.route.queryParams.subscribe((params: Params) => {
      this.embedService.GetMetaTagData(this.embedSrc)
        .subscribe((data: any) => {
          this.embedData = data;
          console.log(this.embedData);
        }
        );
    });
  }

  ngOnInit() {
    this.getEmbedJsonData();
  }

  ngOnChanges() {
    //console.log("it got changed");
    this.getEmbedJsonData();
  }
}

и сопровождающий HTML-код для вставки сюда

<div *ngIf = "embedData.length != 0" class = "media embed-box">
    <a [ngStyle] = "{

                     'background-image': 'url('+ embedData.thumbnail_url +')',
                     'width' : '218.816px',
                     'height': '120px' 
                    }"></a>


    <!-- <img class = "embed-thumbnail" [src]='embedData.thumbnail_url'/> -->
    <div class = "embed-body" style = " margin-left: 10px;">
        <div class = "media-body">
            <h5 class = "mt-0"> {{ embedData.title }} </h5>
            <p class = "description block-with-text"> {{ embedData.description }} </p>
        </div>
    </div>    
</div>

И да, у меня действительно работает сервер, поэтому метаданные для встраивания определенно принимаются.

когда я запускаю его, innerHTML имеет значение null. И объект встроенной карты выглядит как на картинке ниже

https://snag.gy/FjNDct.jpg

Обновление:

Это действительно похоже на то, что я должен быть в состоянии найти в Google, но я провел большой объем поиска и не нашел ничего относительно моей проблемы. Может быть, я просто не в порядке, но, пожалуйста, если кто-нибудь может дать мне направляющую руку, которая поможет, прошло уже 5 дней.