HTML webpage with all css in Angular app

I'm new to Angular and trying to resolve problem concerning displaying HTML website in my Angular application.
The webpages with all resources like images, css files etc. are stored on external server. Sites contain text, images, own styles, css etc. Everythink works fine when I open such website in web browser. When I trying to display such page inside my application a lot of problems aren't resolved.

I used innerHtml to diplay page in application:

<div [innerHtml]="content"></div>


All links are being changed to be direct before displaying. Text and images display but styles aren't applied. Maybe the problem is connected with the fact that links to .css are located in <"head> block?

Hope sb had problem like me and can help :)
Thanks in advance.

1 Answer
1

you can try to Sanitize (Please read the documentation from Angular about what it means to use a DomSanitizer) your html before putting it inside the html.

DomSanitizer

In your component, inject DomSanitizer, and bypass security:

safeContent;
constructor(private sanitizer:DomSanitizer){
const content = "your html";
this.safeContent = this.sanitizer.bypassSecurityTrustHtml(content);
}


and in your html:

<div [innerHtml]="safeContent"></div>


ViewEncapsulation.Native

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.