Angular 2 compile dynamic template with data

Question

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()
}

}

Here is the plunker for the requirement. https://plnkr.co/edit/vJHUCnsJB7cwNJr2cCwp?p=preview — Karthick, Oct 18 '16 at 05:36
@yurzui is there any possibilities to compile the element with data.? — Karthick, Oct 18 '16 at 11:41
See also http://stackoverflow.com/questions/38607075/creating-a-dynamic-repeater-with-ng-content-transclusion-with-angular2/38609725#38609725 — yurzui, Oct 19 '16 at 05:54
@yurzui Could you do me a favor.? Can you please delete the plunker? — Karthick, Oct 19 '16 at 18:38
@yurzui If I am trying the template in two columns, both column cells having same element. ie. template1=button1 and template2=button2 in the grid cell both button1 and button2 rendered. Could you please help me to resolve the issue? — Karthick, Oct 20 '16 at 11:55

score 1 · Answer 1 · answered Oct 17 '16 at 10:05

1

If you want to assign a variable to a property you need to use the bracket syntax:

     <input _ngcontent-ila-1="" type="button" [value]="Template"></div>

The [] means, that the variable Template will be assigned to the value attribute of the input element.

As explained here: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

answered Oct 17 '16 at 10:05

Alexander Ciesielski

10,506
5
45
66

I am not looking for the syntax. I am having data and jquery element in the directive . I am looking for how to dynamically compile the both element and data in ngAfterViewInit life-cycle hook. – Karthick Oct 17 '16 at 10:14
I don't understand what you are trying to do, please provide more code and info. – Alexander Ciesielski Oct 17 '16 at 10:15
update the query with TemplateElement class. In which how to compile the template with data in compileTemplate() method. The template might be anything (Checkbox, Dropdown, etc.) which is going to be placed in gridcell. – Karthick Oct 17 '16 at 10:24

score 1 · Accepted Answer · edited May 23 '17 at 12:32

1

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>

edited May 23 '17 at 12:32

Community

1
1

answered Oct 18 '16 at 13:02

Targaryen

1,081
2
17
30

I am looking for dynamically compile the innerHTML from .... tag. I am able to get the innerHTML and gridData in ngAfterViewInit method.i.e.
{{data.value}}
, in this template how can I compile the expression.? – Karthick Oct 18 '16 at 15:59
What you're trying to do is called transclusion: https://toddmotto.com/transclusion-in-angular-2-with-ng-content – Targaryen Oct 18 '16 at 16:01
I did some analysis and I can able to process the innerHTML and render the same in grid cell using EmbeddedView which I have updated in the query. childView = this.viewContainerRef.createEmbeddedView(this.templateRef, { '$implicit': templateObject[template].itemData[i] }); this.childViews[i] = childView; $(tmplElement[i]).append(childView.rootNodes); But the dynamic data compilation is not working. Am I doing anything wrong.? – Karthick Oct 19 '16 at 04:22
OK... It is difficult to understand your English. However, I'm just not sure what you mean by "the dynamic data compilation is not working." What dynamic data compilation? Unfortunately, I have no idea what you mean. – Targaryen Oct 19 '16 at 14:31
Thanks for your comments. I resolved the issue using ViewContainerRef and TemplateRef – Karthick Oct 19 '16 at 17:56

Angular 2 compile dynamic template with data

2 Answers2

Linked