How to transform string to syntax Angular2

Question

 @Component({
        selector: 'my-app',
        template: `{{name}}`
    })
    export class AppComponent {
        data: string = "data"
        name:string
        constructor() {
            this.name = "<input [(ngModel)]='data' />"
        }
}

I want to show textbox and binding data variable

score 1 · Answer 1 · answered Oct 13 '16 at 08:09

1

This is not supported.

You can create components at runtime using the compiler class (there are related answers and questions here).

Besides that Angular doesn't process bindings or component or directive selectors that are added to the DOM, it does it only with markup added to a components template statically.

answered Oct 13 '16 at 08:09

Günter Zöchbauer

623,577
216
2,003
1,567

Can I edit template component by function? Example editTemplate(template : string){ Component({ templte:template }) } – Theerawat Burawat Oct 13 '16 at 11:35
You can't dynamically do anything with the template except creating a new component at runtime. When a component is compiled the template is translated to JS and Angular doesn't use the original markup in any way. – Günter Zöchbauer Oct 13 '16 at 11:37
Error "No component factory found for " – Theerawat Burawat Oct 13 '16 at 12:43
I have seen this approach but I haven't tried it myself and don't know how to make it work. There are other questions that address this as far as i remember. – Günter Zöchbauer Oct 13 '16 at 12:54

score 0 · Answer 2 · edited May 23 '17 at 12:25

0

https://stackoverflow.com/a/34424375/2160958

The correct syntax is now the following:

<div [innerHTML]="theHtmlString"> </div> Working in "2.0.0"

edited May 23 '17 at 12:25

Community

1
1

answered Oct 13 '16 at 08:12

vardius

6,326
8
52
97

This will apply string as html, but will not work with angular directive and syntax. there is no other way then change your code to at least use this html binding. – vardius Oct 13 '16 at 08:23

How to transform string to syntax Angular2

2 Answers2