Search code examples
javascriptangularkendo-ui-angular2

Dynamic component does not bind properly

In our Angular 2 application we use the Combobox component from Kendo. This component is wrapped into a component created dynamically during the runtime. The code of the creation is very simple :

let factory = this.resolver
        .resolveComponentFactory(ComboboxComponent);

nextTo.createComponent(factory);

The nextTo variable represents where Angular has to create the component.

@ViewChild('container', { read: ViewContainerRef })
container: ViewContainerRef;

The container variable represents a div in the HTML Template.

NB : the component is created during the ngAfterViewInit event. No errors are thrown during the creation.

The Kendo component is properly instanciated and initialized, but when we affect data after the creation, the component seems to don't recognize the binding, and do nothing. Any ideas ?

HTML of the component :

<kendo-combobox [data]="listItems"></kendo-combobox>

TypeScript :

@Component({
    templateUrl: `combobox.component.html`,
    selector: 'combobox',
    styleUrls: [
        'combobox.component.css'
    ]
})
export class ComboboxComponent extends FieldComponent {
    public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
}

NB2 : FieldComponent is an abstract class we use for global actions for all of our components.

EDIT1 : I finally manage to find what's the problem, but I can't say what's wrong. When I inspect the DOM, I can see that a <div role='combobox'> is hidden, and this is the combobox which contain all data. So why have I a second combobox shown with no data ?

enter image description here

Solution

  • I've found what cause this strange behavior. Due to the very first beginning of the project, we use Kendo JQuery for our components, and we use kendo.all.js. I don't really know why, but it seems that kendo.all.js interfers into the kendo-combobox HTML template of the new Angular component, and it inject some intempestive HTML which cause the strange behavior.