How to load component as content in jsPanel Angular2

Question

I am trying to load an Angular component in jsPanel, but it doesn't work yet. Chrome DevTools always show <app-chat-tab></app-chat-tab> instead of the component html, so I think it's not rendering at all.

This is my code:

export class ChatTabService {
  jsPanel: any;
  activeChats: ClientUser[];

  constructor(@Inject(PLATFORM_ID) private platformId, private zone: NgZone) {
    if (isPlatformBrowser(this.platformId)) {
      this.jsPanel = require('node_modules/jspanel4/es6module/jspanel.min.js').jsPanel;
    }
  }

  openChatWindow(toUser: ClientUser) {
    if (!this.activeChats.find(u => u.id === toUser.id)) {
        this.jsPanel.create({
          theme: 'primary',
          headerTitle: toUser.username,
          position: 'center-top 0 58',
          contentSize: '450 250',
          content: '<app-chat-tab></app-chat-tab>',
          callback() {
            this.content.style.padding = '20px';
          },
          onbeforeclose() {
            return confirm('Do you really want to close the panel?');
          }
        });
        this.activeChats.push(toUser);
    }
  }

}

Any ideas?

Answer 1

Yes you can use Angular component in jsPanel content. For that you have to first get the nativeElemetn of the component that you want to use inside content of jsPanel.

So if your component name is "PopupContentComponent" then you need to add below code.

const factory = this.resolver.resolveComponentFactory(PopupContentComponent);
const componentRef = this.vcr.createComponent(factory);
const element = componentRef.location.nativeElement;

Be sure that you have included the dependencies in the constructive.

constructor(private cd: ChangeDetectorRef,
        private vcr: ViewContainerRef,
        private resolver: ComponentFactoryResolver) {
    }

And then you can user "element" inside the jsPanel "content".

onwindowresize: true,
content: element,
onstatuschange: (panel, status) => {

This is tested with Angular 10.