Adding dynamic HTML from component to HTML is removing a property / attribute

Question

I am trying to add html from editpage.ts to editpage.html

editpage.ts

var strHTML = '<p [contentEditable]="contentEditable" >abc<p>';
this.possibleHTML = strHTML;
 this.possibleHTML = this.possibleHTML.map(value => this._sanitizer.bypassSecurityTrustHtml(value));

editpage.html

<div  id="main-wrapper">   
    <content *ngIf="possibleHTML">
           <div [innerHtml]="possibleHTML"></div>
    </content>
</div>

When this is inserted, then in developer tools, it looks like this

<h1 _ngcontent-c2>Hii<h2>

My [contentEditable]="contentEditable" attribute is gone. I need to inject HTML dynamically and I need this attribute to change text.

Edit

My component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-filemanager',
  templateUrl: './filemanager.component.html',
  styleUrls: ['./filemanager.component.css']
})
export class FilemanagerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
this.document.getElementById("main-wrapper").innerHTML += "<p [contentEditable]="contentEditable" >abc<p>";
  }

}

Now what I want is, my attribute should not be lost.

HTML added using [innerHTML]="..." is ignored by Angular. You won't ever be able to make Angular resolve value- or event-bindings or create component for content added this way. If you want Angular you process as string as template content dynamically, you can create a component at runtime and JIT-compile it. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 15, 2017 at 9:45
It doesn't add anything Angular-specific using [innerHTML]="..." — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 15, 2017 at 9:53

score 1 · Accepted Answer · 2017-06-15 09:38:44Z

1

I faced this issue myself not so long ago. The problem is with contentEditable that won't be added to your tags if you add it dynamically. If you want to add it, you have to use the innerHTML of a HTMLElement.

This means you can either use a @ViewChild decorator, or use JQuery to find your element. But it won't work by using Angular binding.

Hope this helps.

EDIT This is the example working in my project :

@ViewChild('itcamStr') itcamStr: ElementRef; 

// ... Doing other stuff in my component 

randomFunction() {
    // ... Doing stuff not related before
    this.itcamStr.nativeElement.innerHTML += this.buildLabel('string', 'type');
}

buildLabel(s: string, type: string): string {
    return `<label class="label label-${type} itcam-label" contenteditable="false">${s}</label>`;
}

EDIT 2 Here is a fully working component :

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my',
  template: '<div #child></div>',
})
export class MyComponent implements OnInit {
    @ViewChild('child') child: ElementRef;

    ngOnInit() {
        this.child.nativeElement.innerHTML = `<p contenteditable>Editable Content</p>`;
    }
}

In your HTML page you juste have to do <my></my>.

edited Jun 15, 2017 at 9:38

answered Jun 15, 2017 at 9:06

user4676340

Sign up to request clarification or add additional context in comments.

14 Comments

user2828442 Over a year ago

can you provide an example which i can try, even by using innerHTML we are facing the same problem. My colleague posted this - stackoverflow.com/questions/44556633/…

user4676340 Over a year ago

Sure, please see my edit. I slightly changed my own code but you have a full working example here

user2828442 Over a year ago

I am new in angular and this looks like a bit complicated , i am editing my question after 5 minutes, can you adjust this code in my simple ts code please, will be helpful to test

user4676340 Over a year ago

Better, I will do another edit with a fully working component. Wait a second.

user2828442 Over a year ago

That thing worked but when i am trying like this - this.child.nativeElement.innerHTML = <p [contentEditable]="contentEditable">Editable Content</p>; this is not working, it actually works when i click the edit button which makes [contenteditable]="true" , any suggestion on this ?

|

Collectives™ on Stack Overflow

Adding dynamic HTML from component to HTML is removing a property / attribute

Edit

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related