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
– AbdulG, Commented Apr 10, 2021 at 20:57

Rahul Dudhane · Accepted Answer · 2020-01-23 11:00:17Z

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, 2020 at 11:00

Rahul Dudhane

5546 silver badges6 bronze badges

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

5 Comments

ecasper Over a year ago

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?

Rahul Dudhane Over a year ago

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

ecasper Over a year ago

I tried but unfortunately, it didn't make any difference. with inspect element, I can see <div [innerHTML]="htmlStr | sanitizeHtml"> </div> being added but nothing else. This is where I'm trying to apply this. stackoverflow.com/questions/59865736/…

Kieran Ryan Over a year ago

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. <b></b> as being of zero risk so sanitizing not required :-)

Rahul Dudhane Over a year ago

@KieranRyan yes sanitization is not need for <b> tag but if someone has more css then may be it will be useful and thanks for the feedback

Arshad N · Accepted Answer · 2020-01-23 10:04:48Z

-1

Use InnerHtml

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

Inside Ts :-

string html = "Your Html Content"

answered Jan 23, 2020 at 10:04

Arshad N

112 bronze badges

1 Comment

ecasper Over a year ago

As I mentioned on my original question, binding does not help in my case as I don't have access to '<div>[innerHtml]="html"</div>

Collectives™ on Stack Overflow

compile a dynamic html string in Angular 8

2 Answers 2

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Linked

Related