jQuery UI Widgets Forums Angular Angular 4 component inside jqxTabs tab

This topic contains 10 replies, has 5 voices, and was last updated by  benjamin.deve 1 year, 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author

  • smirnov
    Participant

    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?

    • This topic was modified 2 years, 9 months ago by  smirnov.
    • This topic was modified 2 years, 9 months ago by  smirnov.
    • This topic was modified 2 years, 9 months ago by  smirnov.
    • This topic was modified 2 years, 9 months ago by  smirnov.

    Peter Stoev
    Keymaster

    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


    smirnov
    Participant

    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 Stoev
    Keymaster

    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


    smirnov
    Participant

    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 Stoev
    Keymaster

    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

    Angular 4 component inside jqxTabs tab #95703

    softboy99
    Participant

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

    Angular 4 component inside jqxTabs tab #95848

    a2m developer
    Participant

    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! 🙂

    Angular 4 component inside jqxTabs tab #95990

    softboy99
    Participant

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

    Angular 4 component inside jqxTabs tab #98558

    softboy99
    Participant

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

    Angular 4 component inside jqxTabs tab #101733

    benjamin.deve
    Participant

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.