Angular 4 component inside jqxTabs tab

[smirnovParticipant]

Hello!
I’m trying to build application which consists of menu and jqxTabs as main container for dynamically loaded views. Every view is an Angular 4 component. When user selects a menu item, the application loads JS module and creates angular component with Compiler.compileModuleAndAllComponentsSync. After that I try to open a new tab with the component inside it. But instead of rendered componet’s inside I can see only raw componet’s tag.

@Component({
  selector: "vg-dynamic-view",
  template: "Component is: <div #container></div>"

})
export class DynamicViewComponent implements AfterViewInit{

  ngAfterViewInit(): void {
     if (this.componentFactory){
       this.container.createComponent(this.componentFactory)
     }
  }

   @ViewChild("container", {read: ViewContainerRef}) container;
   @Input() componentFactory;

   setComponentFactory(factory){
     this.componentFactory = factory;
     this.container.createComponent(this.componentFactory)
   }
}

@Component({
  selector: 'vg-tab-container',
  entryComponents: [jqxTabsComponent, DynamicViewComponent],
  template: '
<jqxTabs #tabContainer [auto-create]='false'>
                    <ul>
                        <li></li>
                    </ul>
                    <div>
                    </div>
            </jqxTabs>',
})
export class TabContainer implements ITabContainer, AfterViewInit{

  ngAfterViewInit(): void {
    this.tabsContainer.createComponent();
  }
    @ViewChild('tabContainer') tabsContainer: jqxTabsComponent;
    factory = null;

    addTab(factory){
      console.log("try to create tab", factory);
      this.factory = factory;
      this.tabsContainer.addLast("Новая", "<vg-dynamic-view [componentFactory]='factory'></vg-dynamic-view>");
    }
}

<div class="jqx-tabs-content jqx-widget-content jqx-rc-b" style="float: none; height: auto;"><div role="tabpanel" class="jqx-tabs-content-element jqx-rc-b jqx-rc-b" style="display: none;">
                    </div><div class="jqx-tabs-content-element jqx-rc-b" style="display: block;"><vg-dynamic-view [componentfactory]="factory"></vg-dynamic-view></div></div>

How can I render angular component inside new-opened tab?

[Peter StoevKeymaster]

Hi smirnov,

The jQWidgets Angular Tab component’s addLast method which you used inserts a new Tab with Title and HTML String. I think you will have to call additional Angular code after you insert a tab.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[smirnovParticipant]

Peter Stoev,
Ok, but I have neither idea how to inject Angular2 component into the existing DOM element nor how to render the existing DOM element with an angular template into it. Can you give me some advise?

[Peter StoevKeymaster]

Hi smirnov,

You may look at https://angular.io/guide/dynamic-component-loader for dynamic loading of Angular components.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[smirnovParticipant]

Peter Stoev,
But I haven’t got problems with dynamic component loading. I have problem with inserting component in tab.
I have a component factory to create dynamic component and jqxTab component where I want to insert my component as a tab content. But method creating new tabs has only html argument, not component or factory. After creating a new tab with some html I can’t get a viewContainerRef – it’s just html. Your example is great, but it shows how to place dynamicly created component inside ng-template container, not anywhere I want, not inside HtmlElement.

[Peter StoevKeymaster]

Hi smirnov,

Yes, but in a Tab you insert HTML only, then you should use Angular APIs to Load it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[softboy99Participant]

yes, i have same problem, could you please help us and give out a sample? Thanks a lot.

[a2m developerParticipant]

I was having the same issue and figured out a solution that’s working so far. Hopefully it help others.

 constructor(private componentfactoryResolver: ComponentFactoryResolver,
    private injector: Injector,
    private app: ApplicationRef) { }

Set the content with a placeholder

this.relatedTabs.forEach(config => {
        if (config['SHOWN_BY_DEFAULT']) {
          let index = count - 1;
          config['TAB_INDEX'] = count++;
          config['INITIALIZED'] = false;
          let title = config['LABEL'];
          let content = <code><div id=&quot;hdlist${index}&quot;></div></code>; //Placeholder
          this.tabsReference.addAt(index, title, content);
        }
      });

Use the Factory to create the component and the Injector to put it into the DOM.

tabclick(event) {

    let index = event.args.item;

    if (this.relatedTabs[index] && !this.relatedTabs[index]['INITIALIZED']) {
      
      this.relatedTabs[index]['INITIALIZED'] = true;

      let node = document.getElementById('hdlist' + index);
      let ref = this.listCompFactory.create(this.injector, [], node);
      ref.instance.widgetParams = { WIDGET_ID: 565 }; //Set Inputs 
      ref.instance.width = '100%';
      ref.instance.height = '95%';
      //  ref.changeDetectorRef.detectChanges(); // Issue could arise with change detection. Not sure yet. 
      this.app.attachView(ref.hostView);
      this.listRefs[index] = ref;
    }
  }

All of my tabs are dynamic so I couldn’t use the ViewChild/Children.

Good Luck! 🙂

[softboy99Participant]

Hi a2m developer:
Can you share your sample code? Thanks a lot.

[softboy99Participant]

Hi Peter Stoev:
Could you please kindly give us a sample of this? Thanks a lot for your great help.

[benjamin.deveParticipant]

Hi a2m developer:
Can you share your sample code please, Thanks

[Author]

Posts