Внедрить любой компонент html/внутри компонента, используя angular 4+

У меня есть всплывающий компонент, и я хочу внедрить в него любой пользовательский компонент. В настоящее время я использую [innerHTML], но он не может отображать какие-либо пользовательские компоненты. Я прочитал этот https://angular.io/guide/dynamic-component-loader, но не смог его реализовать. Поэтому, пожалуйста, предложите.

popup.component.ts

<p-dialog [(visible)] = "display" [responsive] = "true" [blockScroll]=true (onHide) = "onHide($event)" [width] = "width" [resizable] = "false">
    <p-header>
        <i>{{ title }}</i>
    </p-header>
    <div [innerHtml] = "content|sanitizehtml"></div>
    <p-footer>
        <button type = "button" pButton icon = "pi pi-close" (click) = "buttonClick($event)" [label] = "noLabel" class = "ui-button-secondary"></button>
        <button type = "button" pButton icon = "pi pi-check" (click) = "buttonClick($event)" [label] = "yesLabel"></button>
    </p-footer>
  </p-dialog>

app.componet.ts

    openLookup(e){
        this.display = true;
        this.title = 'Product ID';

        this.content = `<p-checkbox [(ngModel)] = "someFlag" binary = "true" (onChange) = "changedRow()"></p-checkbox>
<p-calendar  name = "endDate" [(ngModel)] = "endDate" [monthNavigator] = "true" [yearNavigator] = "true" yearRange = "1990:3000" [disabledDays] = "[0,6]" [showIcon] = "true" styleClass = "full-width" inputStyleClass = "calender-width">

                                    </p-calendar>`;

      }