Karthick Karthick - 1 month ago 29
jQuery Question

Angular 2 compile dynamic template with data

I am developing bridge like interface for jquery grid control. The grid is rendered with the below syntax and works as expected.

<t-grid>
<t-column>...</t-column>
<t-column>...</t-column>
</t-grid>


While providing support to render template inside the
t-column
tag, I am able to get the data and jquery element.

jQuery element

<div class="angulartmplbda8aedb-6b16-456d-8c17-3240a674b0c7 angular-template">
<div _ngcontent-ila-1="">
<input _ngcontent-ila-1="" type="button" value="Template"></div>
</div>


Now, the button is displayed with
template
text. How to dynamically change the input element value which is from gridData.?

export class TemplateElement {
private context: any;
__parent: tComponents<any, any>;
constructor(protected el: ElementRef) {
}

ngOnInit() {
template.render = (self, selector, data, index, prop) => {
let templateObject = self.angularTemplate;
if (!templateObject || !templateObject[selector]) {
templateObject = templateObject || {};
templateObject[selector] = { key: t.getGuid('angulartmpl'), itemData: [], views: [] };
self.angularTemplate = templateObject;
}
let scope = templateObject[selector];
if (!t.isNullOrUndefined(index)) {
if (!scope.itemData)
scope.itemData = [];
scope.itemData[index] = data;
} else {
scope.itemData = [data];
}
let actElement = $(this.el.nativeElement).html();
let tempElement = "<div class='" + templateObject[selector].key + " t-angular-template'>" + actElement + '</div>';
return tempElement;
}
}
ngAfterViewInit() {
this.compileTempalte();
}

compileTempalte() {
let element = this.__parent.widget.element;
let templates = $(element).find('.t-angular-template');
let templateObject = this.__parent.widget.angularTemplate;
for (let template in templateObject) {
let tmplElement = templates.filter('.' + templateObject[template].key);
if (tmplElement.length) {
for (let i = 0; i < tmplElement.length; i++) {
//modified code
childView = this.viewContainerRef.createEmbeddedView(this.templateRef, { '$implicit': templateObject[template].itemData[i] });
this.childViews[i] = childView;
$(tmplElement[i]).append(childView.rootNodes);
}
} else {
delete templateObject[template];
}
}
}

clearTempalte() {
let templateObject = this.__parent.widget.angularTemplate;
if (templateObject && Object.keys(templateObject).length) {
for (let tmpl in templateObject) {
delete templateObject[tmpl];
}
}
}
ngOnDestroy(){
this.clearTempalte()
}


}

Answer

As discussed, you need to use transclusion:

And you need to add let-item="$implicit" on this part:

<template t-template let-item="$implicit">
    <input t-button [value]="item.CustomerID" />
</template>