Добавьте всплывающее окно кендо из kendo-colorpicker к «компоненту»

Мы можем просто передать ViewContainerRef родительского элемента оболочки, который я использую ссылку на шаблон #ref, а затем получить доступ к ViewContainerRef, используя ViewChild, куда мы поместили read, чтобы получить ViewContainerRef

код

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.info(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.info('change detection is called');
    this.el.nativeElement.style.backgroundColor = this.color;
  }

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

Демо-версия Stackblitz