Append kendo popup of the kendo-colorpicker to the 'component'

   <kendo-colorpicker
            [view]="view"
            [format]="format"
            [paletteSettings]="settings"
            [(value)]="color"
            [popupSettings]="{ appendTo: 'component'}"
        >
        </kendo-colorpicker>

ERROR - Got this issue Error: container.createComponent is not a function

https://stackblitz.com/edit/angular-khdydo-yqbeep?file=app%2Fapp.component.ts

We can just pass the ViewContainerRef of a wrapper parent element which I use the template reference #ref then access the ViewContainerRef using ViewChild where we put read to get the ViewContainerRef

code

import {
  Component,
  ElementRef,
  ViewChild,
  ViewContainerRef,
} from '@angular/core';
import { PaletteSettings } from '@progress/kendo-angular-inputs';
import { AppService } from './app.service';

@Component({
  selector: 'my-app',
  template: `
    <div #ref>
          <other></other>
          <child [color]="color" (sendToParent)="fromChild($event)"></child>
          <div>
              <strong>Selected color in {{ format }}: {{ color }}</strong>
          </div>
          <kendo-colorpicker
              [view]="view"
              [format]="format"
              [paletteSettings]="settings"
              [(value)]="color"
              [popupSettings]="{ appendTo: vcr }"
          >
          </kendo-colorpicker>
    </div>
    `,
  styles: [
    `
        :host {
            height: 100vh;
            width: 100vw;
        }
    `,
  ],
  providers: [AppService],
})
export class AppComponent {
  @ViewChild('ref', { read: ViewContainerRef, static: true })
  vcr: ViewContainerRef;

  constructor(private el: ElementRef, private appServ: AppService) {}

  ngAfterViewInit() {
    console.log(this.vcr);
  }
  public color = '#f9d9ab';
  public view = 'palette';
  public format = 'hex';

  public settings: PaletteSettings = {
    palette: [
      '#f0d0c9',
      '#e2a293',
      '#d4735e',
      '#65281a',
      '#eddfda',
      '#dcc0b6',
      '#cba092',
      '#7b4b3a',
      '#fcecd5',
      '#f9d9ab',
      '#f6c781',
      '#c87d0e',
      '#e1dca5',
      '#d0c974',
      '#a29a36',
      '#514d1b',
      '#c6d9f0',
      '#8db3e2',
      '#548dd4',
      '#17365d',
    ],
    columns: 5,
    tileSize: {
      width: 60,
      height: 30,
    },
  };

  ngDoCheck() {
    console.log('change detection is called');
    this.el.nativeElement.style.backgroundColor = this.color;
  }

  fromChild(event) {
    console.log('from child event', event);
  }
}

Stackblitz Demo