Ribbon bar add components as items dynamically

[KoimadParticipant]

Hase anyone have any ideas how you dynamically add comonents as ribbon items to the jqxRibbon. I can get it to add simple text, but not an angular comoponent. My code is below

Simple Text working example
ngAfterViewInit() {
this.store.select(f => f.ribbonTabs).subscribe(ribbonTabs => {
if (ribbonTabs) {
// Clear out old ones
for (let index = 10; index >= 0; index–) {
this.ribbonBar.removeAt(index);
}

let position = 1;

// Add new one in order
ribbonTabs.sort(f => f.order).forEach(element => {
const factory = this.componentFactory.resolveComponentFactory(element.component);
const component = factory.create(this.viewContainerRef.parentInjector);

this.ribbonBar.addAt(position++, { title: element.title, content: element.title });
});
}
});
}

The one that does not work

ngAfterViewInit() {
this.store.select(f => f.ribbonTabs).subscribe(ribbonTabs => {
if (ribbonTabs) {
// Clear out old ones
for (let index = 10; index >= 0; index–) {
this.ribbonBar.removeAt(index);
}

let position = 1;

// Add new one in order
ribbonTabs.sort(f => f.order).forEach(element => {
const factory = this.componentFactory.resolveComponentFactory(element.component);
const component = factory.create(this.viewContainerRef.parentInjector);

this.ribbonBar.addAt(position++, { title: element.title, content: component }); //throws error
// this.ribbonBar.addAt(position++, { title: element.title, content: component.instance });//throws error
// this.ribbonBar.addAt(position++, { title: element.title, content: component.injector });//throws error
// this.ribbonBar.addAt(position++, { title: element.title, content: component.hostView });//throws error
});
}
});
}

Error Generated

core.js:1624 ERROR TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at b.(:4200/anonymous function).addAt (http://localhost:4200/vendor.js:66813:2499)
at Object.push../node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js.a.jqx.invoke (jqxcore.js:14)
at Object.push../node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js.a.jqx.jqxWidgetProxy (jqxcore.js:14)
at HTMLDivElement.<anonymous> (jqxcore.js:14)
at Function.each (jqxcore.js:7)
at init.each (jqxcore.js:7)
at init.a.fn.(:4200/anonymous function) [as jqxRibbon] (http://localhost:4200/vendor.js:66794:12460)
at jqxRibbonComponent.push../node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxribbon.ts.jqxRibbonComponent.addAt (angular_jqxribbon.ts:283)
at ribbon.component.ts:61
at Array.forEach (<anonymous>)

[MartinParticipant]

Hello Koimad,

For adding components as items dynamically in the jqxRibbon, I would suggest you to use the “createInstance” method for creating the new widgets.
Here is an Example on how you can do it.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts