How do I use html in Template directive in Angular2?

Question

Currently I want to have a clickable anchor tag in template to display a message. However, during run time, I keep receiving this error.

Uncaught ReferenceError: display is not defined

My code is as followed:

prepareKendoGrid(searchresults:any[]) {
    console.log(this.searchresults);

    this.adhocSearchKendoGrid = {
        sortable: true,
        columns: [{
            field: "filename",
            title: " ",
            width: 50,
            template: "#if(filetype == 'xml') {#<i style='margin-left:10px' class='fa fa-file-code-o fa-1x'></i>#} else if(filetype == 'doc') {#<i style='margin-left:10px' class='fa fa-file-word-o fa-1x'></i>#} else if(filetype == 'pdf') {#<i style='margin-left:10px' class='fa fa-file-pdf-o fa-1x'></i>#}else if(filetype == 'txt') {#<i style='margin-left:10px' class='fa fa-file-text-o fa-1x'></i>#}#"
        },
        {
            field: "filename",
            title: "File Name",
            width: 200
        },
        {
            field: "content",
            title: "Content"
        },
        {
            field: "start_time",
            title: "Conversation Date",
            width: 200
        },
        {
            field: "attachments.count",
            title: "Attachments",
            width: 100,
            template: "<a style='margin-right:10px' (click)='display()'><i class='fa fa-paperclip fa-fw'></i></a>#: attachments.count #"
        }],
        dataSource: searchresults
    };

    let cst = new CSTGridComponent();
    cst.createGrid(this.adhocSearchKendoGridId,this.adhocSearchKendoGrid);
}

display() {

    console.log('ok');
    }
}

score 3 · Answer 1 · answered Oct 24 '16 at 07:57

3

It should be

(click)='display()'

See also

http://learnangular2.com/events/

answered Oct 24 '16 at 07:57

Günter Zöchbauer

623,577
216
2,003
1,567

Unfortunately when I do that, nothing happens. Is there a reason why it's like that or is it because in the template directive, it does not find such a method? – Mitchell Y Oct 24 '16 at 08:00
2

I didn't look to closely at your other code but what I see doesn't make much sense (except the `tempalte: ...` line) What is that supposed to do? Where do you have this code? Can you add more code to your question to make it more clear what you try to accomplish? – Günter Zöchbauer Oct 24 '16 at 08:02
You should use `*ngFor`. Angular2 doesn't care about HTML added dynamically. It only processes HTML added statically to a components template. – Günter Zöchbauer Oct 24 '16 at 08:07
But in this case, each row has an icon and ngFor wouldn't be needed here. Is there a way to still allow the icon to be clickable and linked to the display() function? – Mitchell Y Oct 24 '16 at 08:30
1

Difficulat because the click would then not be handled by Angular. "ngFor wouldn't be needed here" sounds weird. `*ngFor` is not heavy. In Angular2 you should strive to let Angular2 update the DOM and in your code only update the data and let `*ngIf`, `*ngFor`, `*ngSwitchCase`, `[]`, {{}}` update the DOM. – Günter Zöchbauer Oct 24 '16 at 08:44
1

That's a good point! Appreciate your help on this. Will try to work with what you have said. – Mitchell Y Oct 24 '16 at 09:05
I have tried using *ngFor inside template, but it doesn't output the data accordingly. In fact, it prints '{{values}}' when i was to display an array of values. – Mitchell Y Oct 28 '16 at 09:50
1

As mentioned above. Angular doesn't care about HTML added dynamically. `(click)="xxx"` and `{{yyy}}` and `[prop]="val"` won't do anything if they are not added statically to a components template. If you really need to add it dynamically you can use http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 – Günter Zöchbauer Oct 28 '16 at 09:53

How do I use html in Template directive in Angular2?

1 Answers1