Angular does not render html in typescript

Asked Jan 09 '19 at 13:10

Active Jan 09 '19 at 13:10

Viewed 372 times

I code some html in my component like below. I add span with specific class in renew innerHTML of an element:

        nodes = this.getAllTextnodes(this.textarea.nativeElement);
        x1 = nodes[0].data.substring(0, this.characterLimit - 1);
        x2 = nodes[0].data.substring(this.characterLimit - 1, nodes[0].nodeValue.length);
        x3 = '';
        for (let i = 1; i < nodes.length; i++) {
          x3 += '<span class="highlighted-text">' + nodes[i].nodeValue + '</span>';
        }

        replaceContent = x1 + '<span class="highlighted-text">' + x2 + '</span>' + x3;
        this.textarea.nativeElement.innerHTML = replaceContent;

but when my code run, my class did not apply to span. I get below photo to make this sense better:

and problem is here that i don't have _ngcontent_c10 in my span , but i don't know how to fix this problem.

asked Jan 09 '19 at 13:10

Mohandes

2

Is it possible to create a demo on https://stackblitz.com/? – Jitendra G2 Jan 09 '19 at 13:14
2

You can use the /deep/ keyword in your css within your angular app. I do not know your css but something like should work `/deep/ .highlighted-text {background-color: red;}` - see https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep – J. Knabenschuh Jan 09 '19 at 13:17
1

You can do what @J.Knabenschuh said, or change encapsulation of entire component to: @Component({ . . . encapsulation: ViewEncapsulation.None }) – Slaven Tomac Jan 09 '19 at 13:18
@J.Knabenschuh thank you. it works. – Mohandes Jan 09 '19 at 13:28
@J.Knabenschuh `/deep/` is deprecated. – Maihan Nijat Jan 09 '19 at 13:41
Yeah, I know, see the link. I do not known alternative ways, exepcted the suggestion by @Slaven Tomac – J. Knabenschuh Jan 09 '19 at 13:46

Angular does not render html in typescript

0 Answers0