Angular 2 dynamic html with properties binding

Question

I have a html string coming form database like html='<span>{{name}}</span>' where name is a property on component.

I want to load this string in html with the name binding. I found a few answers like [innerHTML] but that does not bind the properties declared in component.

You will get the same answer here ;-) You can create components at runtime (you loose AoT) like explained in http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 — Günter Zöchbauer, Dec 07 '16 at 14:08
thanks for the quick answer but i dont want to create a component i will only receive a string on a button click is there any way ? — Shashank Agarwal, Dec 07 '16 at 14:09
Sure, create a component, use that string as template and there you go. You get Angular2 binding with a runtime-provided string. Without a component there isn't a way. Angular2 binding only works in component templates. — Günter Zöchbauer, Dec 07 '16 at 14:10

score 0 · Answer 1 · answered Dec 07 '16 at 14:11

there is idea to achieve it if we create custom annotation for component and use it we can get metadata from api like from jsp file and add it to template instead templateUrl

I haven't created sample code but the rough idea is here ->

    export function CustomComponent(annotation: any) {
      return function (target: Function) {
// call your database and get your string here
        var parentTarget = Object.getPrototypeOf(target.prototype).constructor;

        var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

        var parentAnnotation = parentAnnotations[0];
        Object.keys(parentAnnotation).forEach(key => {
          if (isPresent(parentAnnotation[key])) {
            if (!isPresent(annotation[key])) {
              annotation[key] = parentAnnotation[key];
            }
          }
        });

        var metadata = new ComponentMetadata(annotation);

        Reflect.defineMetadata('annotations', [ metadata ], target);
      };
    };

and use it like

@CustomComponent({
  selector: 'sub'
})
export class SubComponent {
}

Angular 2 dynamic html with properties binding

1 Answers1