0

I'm creating dynamic html with angular, and I can not make it correctly take the native attributes of angular. this is working correctly in @Component template, but this dose not work within any variable.

...

@Component({
  selector: 'app-canvas-render',
  template: `<div [innerHtml]="this.objHtmlElement | domSanitizer: 'safeHtml'"></div>`,
})
export class CanvasRenderComponent implements OnInit {

  objHtmlElement = `<div div *ngFor="let element1 of objSchemaElement"
         [id]="element1.id" [index]="element1.index" class="edited"
         [ngStyle]="this.objElements[element1.index].styles | convertToStyle"
         [appStyleEditCanvas]="this.objStylesLogs.slice(-1)[0]">
      {{element1.id}} - {{element1.index}} - {{element1.type}}
    </div>`;

...

the actual output is:

{{element1.id}} - {{element1.index}} - {{element1.type}}

and the output html code is:

<div div *ngfor="let element1 of objSchemaElement"
         [id]="element1.id" [index]="element1.index" class="edited"
         [ngstyle]="this.objElements[element1.index].styles | convertToStyle"
         [appstyleeditcanvas]="this.objStylesLogs.slice(-1)[0]">
     {{element1.id}} - {{element1.index}} - {{element1.type}}
</div>
Derviş Kayımbaşıoğlu
  • 28,492
  • 4
  • 50
  • 72
Federic
  • 1
  • 1
  • The innerHTML is passed as HTML, not as a template. If you want different templates depending on the object type, you can define ``s in your component's template and use them. – Sachin Gupta Jan 17 '19 at 18:53

1 Answers1

0

Using innerHTML will not work for HTML that contains Angular directives like that. You will need to use dynamic components to accomplish that. Take a look at this question and the subsequent answer. That should get you started in the right direction.

Here is cleaned up and simplified version of a dynamic component working in StackBlitz. Hope that helps :)

Narm
  • 10,677
  • 5
  • 41
  • 54