compile a dynamic html string in Angular 8

Question

I'm new to Angular and I would like to add dynamic content to my view. I referred here but $compile is no longer available in Angular latest it seems.

e.g. the following is my dynamic content in a string (htmlStr).

ngAfterViewInit(){
 let htmlStr = "<nb-actions size=\"small\"><nb-action icon=\"save-outline\" (click)=\"onEdit\" nbTooltip=\"Click to update a 'Company Type'.'\" nbTooltipPlacement=\"right\"></nb-action> </nb-actions>"
 $("#myelement").append(htmlStr);
}

How do I compile the above string so that it will be rendered properly? I also have access to JQuery on my component if that helps! I'm aware of Html binding but it doesn't help in my case.

Any help would be much appreciated here!

I think my question is the exact same as you're asking here. — AbdulG, Apr 10 '21 at 20:57

score 2 · Answer 1 · answered Jan 23 '20 at 11:00

2

You can bind innerHTML property of a div to variable which contains html content.

ex.

<div [innerHTML]="htmlStr"> </div>

One more thing you need is sanitize pipe. Refer following code to create sanitize pipe.

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {
  }

  /**
   *
   * @param- v
   */
  transform(v: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(v);
  }
}

And use this pipe as follows:

<div [innerHTML]="htmlStr | sanitizeHtml"> </div>

answered Jan 23 '20 at 11:00

Rahul Dudhane

484
6
6

I'm sorry but I'm just a beginner for Angular. isn't the view being rendered already at ngAfterViewInit? how do I import the pipe to the component? – ecasper Jan 23 '20 at 11:45
All you need to do is, Create one .ts file named as sanitize.pipe.ts. Paste following code and import all needed things. Declare this pipe in your app.module.ts i.e. add inside declaration array. Now you can able to use this pipe throughout your application. Use syntax given in answer – Rahul Dudhane Jan 23 '20 at 12:13
I tried but unfortunately, it didn't make any difference. with inspect element, I can see

being added but nothing else. This is where I'm trying to apply this. https://stackoverflow.com/questions/59865736/how-to-append-angular-component-to-jqgrids-cell – ecasper Jan 23 '20 at 12:24
1

Thanks for the tip about innerHTML Rahul.. it works.. and on the matter of sanitization: angular is clever enough to recognize simple html e.g. as being of zero risk so sanitizing not required :-) – Kieran Ryan Nov 30 '20 at 17:40
@KieranRyan yes sanitization is not need for tag but if someone has more css then may be it will be useful and thanks for the feedback – Rahul Dudhane Dec 23 '20 at 05:12

score -1 · Answer 2 · answered Jan 23 '20 at 10:04

-1

Use InnerHtml

Inside html :- <div>[innerHtml]="html"</div>

Inside Ts :-

string html = "Your Html Content"

answered Jan 23 '20 at 10:04

Arshad N

11
2

As I mentioned on my original question, binding does not help in my case as I don't have access to '
[innerHtml]="html"
– ecasper Jan 23 '20 at 10:56

compile a dynamic html string in Angular 8

2 Answers2