Store angular Html Code of components in database and show like Component-CodePudding

i have project that user can edit and add Angular Component code Html && TS

when i use html code on view work correctly and show angular Component but when get it from SQL is just shown a text

Html Code come from DB with SP with NVarchar

TSCode :

  this.stringifiedData = JSON.stringify(this.postdata);
  this.helpService.GetComponentContent(this.uRL_Address, this.sp_Name, 
  this.stringifiedData).subscribe(val => {
  this.tableJSon = val;
  this.stringifiedData = JSON.stringify(this.tableJSon);
  this.Table_JS_Data = JSON.parse(this.stringifiedData);

Html

  {{this.Table_JS_Data[0].HtmlCode}}

and the result is

problem is i want to show it like a angular component not a text is that Possible ? Any Idea ?

CodePudding user response：

You can try this way :

<div [innerHTML]="Table_JS_Data[0].HtmlCode"></div>

CodePudding user response：

Angular renders everything inside {{...}} as string interpolation, so in order to achieve actual HTML rendering you need to bind it to the innerHTML HTML property.

So it can work like this:

<div [innerHTML]="this.Table_JS_Data[0].HtmlCode"></div>

CodePudding user response：

As far as I know, it's not possible. Component templates need to be compiled to actual html, and this won't happen at runtime browser-side if you insert it as html.

You can use solution proposed by alifnaiech in his answer, but this will only work for the actual valid html that browser can interpret, and using angular components that are not embedded into app as web components will not work.

If you expect to have fairly structured content of the "components" coming from back-end, you can re-work this to actually store json that represents this structure, and use static generic template to render the "component" using that json using some *ngIf, *ngFor, etc.

If that's not the case, you could use ComponentFactory (documentation includes a link to a tutorial on using dynamic components) to handle more complicated cases.