I've tried to render a raw HTML using innerHTML, as bellow:
<span *ngIf="displacyHTML " [innerHTML]="displacyHTML"></span>
This HTML has style in line, but it does not work in that way.
The HTML is rendered, but the style does not.
If I paste the same raw HTML into a separate file it works perfectly.
The styles I mention is used basically to change the background color of the mark tags.
Potentially, you need a SafePipe for your html as your browser does not trust injected html code:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({ name: 'safePipe'})
export class safePipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer):{}
transform(value) {
return this.sanitizer.bypassSecurityTrustHtml(value);
}
}
usage in HTML:
<span [innerHtml]="potentiallyNotSafeHtmlCode | safePipe"></span>
Related
I have a string stored in my localStorage with the HTML tags since I use ngx-quill (Angular Rich Text Editor) which stores the data in HTML formatted text.
This is what my localStorage looks like:
As you can see from the picture above, in description, there is p tags.
Is there any way I can display it on Angular page without the tags?
Use: [innerHTML] for that, for example:
<div [innerHTML]="data.description"></div>
You need to use innerHTML and make sure that you trust the HTML if it contains script tag else Angular will throw an error.
Do the following, create a safeHTML 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) { }
transform(html: string): any {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
and then use this with innerHTML like this:
<span [innerHTML]="description" | sanitizeHtml"></span>
I'm working on a simplified way to load SVG files without using IMG or OBJECT tags as it impedes my ability to control fill colors through external CSS. Using inline SVG is ideal, but with so many components using repeated icons, it's a lot of maintenance and I'd prefer to centralize them in their .svg file format. I thought about just making each one their own component, but that means there's a component.ts file I don't need for each one, and it might be a little confusing or other developers.
So far, creating a custom element that pulls the svg location from a "src" attribute is working:
#Component({
selector: 'app-svg',
template: `
<ng-template>
{{ src }}
</ng-template>
<span [innerHTML]="svg"></span>
`
})
export class SvgComponent implements OnInit {
svg: SafeHtml = '';
#Input() public src = '';
constructor(private http: HttpClient, private sanitize: DomSanitizer) {
}
ngOnInit(): void {
this.http.get(this.src, {responseType: 'text'}).subscribe(svg => {
this.svg = this.sanitize.bypassSecurityTrustHtml(svg);
});
}
}
Then I use my custom element in another component.html:
<app-svg src="assets/test.svg"></app-svg>
The result of course is an inline SVG with an inline element as a wrapper:
<app-svg src="assets/test.svg" ng-reflect-source="assets/test.svg">
<span>
<svg>
<path d="...">
</svg>
</span>
</app-svg>
I suppose this is harmless enough, but it's a little annoying and there's unnecessary extra markup. Ideally, I'd want to have the innerHTML applied to APP-SVG, but that means the svg in the binding would need to exist outside of the TS for for the custom element due to scoping issues. It's also messy having to remember to include [innerHTML] on every APP-SVG tag. I've tried using [outerHTML] on the SPAN tag in the template, but I get a runtime error saying there is no parent container element.
So, my question is can this work?:
Replace the in the template with the loaded SafeHtml? Or,
Apply the loaded SafeHtml as the innerHTML of the selector in the SvgComponent TS? Or,
Use <svg [innerHTML]="svg"> as part of the template instead of SPAN, but remove the parent SVG from the loaded SafeHtml before applying it to the innerHTML? Or,
Is there something in NPM that already does what I'm trying to create?
I wish they made this easier. Any advice or explanation as to why this won't work would be greatly appreciated. Thank you!
Naturally, as SOON as I post my question, I trip over the solution. The trick is to use ElementRef so that I can target the selector's innerHTML, and I don't have to use DomSanitizer to do it. The new code looks as follows (including imports this time):
import {Component, OnInit, Input, ElementRef} from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Component({
selector: 'app-svg',
template: `
<ng-template>
{{ src }}
</ng-template>
`
})
export class SvgComponent implements OnInit {
#Input() public src = '';
constructor(
private el: ElementRef,
private http: HttpClient,
) {}
ngOnInit(): void {
this.http.get(this.src, {responseType: 'text'}).subscribe(svg => {
this.el.nativeElement.innerHTML = svg;
});
}
}
If you don't want to have app-svg as a container, you can use instead:
this.el.nativeElement.outerHTML = svg;
And it will replace app-svg with he loaded svg. Hope this helps anyone else trying to accomplish the same thing. Cheers!
I have a <div> and I want to have the date inside it. (For some reasons I can't change this configuration) This box may have a text with html properties. It is clear that I should use [innerHTML] but when using it, I can't put the date inside the <div>. I'm wondering if there is any way to have the text without showing the properties like <br/> and having a line break instead, and also having the date just inside the div?
Here is my StackBlitz
text = 'Hi<br/>How are you?';
<div>{{ text }}</div>
<hr/>
<div>{{ text }}<span>HH:MM</span></div>
<hr/>
<div [innerHTML]="text"></div>
<hr/>
<div [innerHTML]="text"><span>HH:MM</span></div>
The snippet is not working because it is not Angular. Please refer to my code above.
You could replace your <br> tags with \n and then add CSS to preserve the line break:
div {
white-space: pre-wrap;
}
<div>{{ text }}</div>
text = 'Hi\nHow are you?';
To put html content to the div, it is needed to convert the html code to stay safe from XSS using DomSanitizer.
So it will be good to generate a new pipe to do this action as follows.
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
import DOMPurify from 'dompurify';
#Pipe({
name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer) {}
public transform(value: any, type: string): any {
const sanitizedContent = DOMPurify.sanitize(value);
return angular.bypassSecurityTrustHtml(sanitizedContent);
}
}
And on the main module, you can import this pipe and can use it as follows.
<div [innerHTML]="text | safeHtml"></div>
The issue I am currently facing is that the link generated by the a tag links to the base page. As you can see in the image it links to
localhost:3000#hello
My goal is to get it to link to
localhost:3000/bodyText#hello
The a tag will come from an external source so my test example mimics that. I have so far been using innerHTML directive to put the external html in the html template.
Here is the component I am working with
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
template: '<div [innerHTML]=html></div>',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() {
}
html = "A tag <a name=\"hello\" id= \"hello\"/> "
ngOnInit() {
}
}
I solved this by adding a click handler to the html tag and then using scrollIntoView and getElementById instead of using an a tag.
I am attempting to create a reusable angular2 component that accepts an array of URLs to html files on my server and creates a content window with tabs to switch between "chapters", effectively swapping out the html and css inside the content window. I have tried all sorts of things including iframes but those don't work, the angular 1 ng-include work-arounds that I can find on StackOverflow but they have all since been deprecated, and the closest I've got is building a component that you can #Input html and it interpolates the content but style won't apply and angular strips out any style or script tags. Here is what I have tried.
In my parent component class:
htmlInput: string = "<h1>Why Does Angular make this so hard?</h1>";
cssInput: string = "h1 { color:red; }"
Parent Component HTML:
<app-html [html]='htmlInput' [css]='cssInput'></app-html>
My HTML Component:
import { Component, Input, OnInit } from '#angular/core';
#Component({
selector: 'app-html',
template: '<div [innerHtml]=html></div>', //This works but no style
//template: '{{html}}', //This displays the actual markup on page
styles: ['{{css}}'] //This does nothing
//styles: ['h1 { color: red; }']//Also nothing
})
export class HtmlComponent implements OnInit {
#Input() html: string = "";
#Input() css: string = "";
ngOnInit() {
}
}
The result of this code is
Why Does Angular make this so hard?
But no red color. Maybe style is applied before the innerHtml is added to DOM? I don't know but just putting {{html}} results in displaying the actual markup with the h1 tags visible.
The reason I want to do it this way is that I have a bunch of HTML pages already created sitting in a folder on my server from before I angularized my site that all share a single style sheet. I'd like to just be able to flip through them like pages in a book without reloading the page and since there are so many and I'm likely to add more all the time, I'd really rather not create routing for every single one. (I already have routing for basic site navigation.)
Does anybody have a better suggestion for how to embed styled HTML into a page dynamically in the most recent version of Angular 2? At the time of this post we are in 2.0.0-beta.17.
OR... I already figured I may be approaching this issue from the entirely wrong angle. There must be a reason Angular is making this so difficult and deprecating all the solutions people have come up with so If anyone has a suggestion about how I could achieve the same results in a more angular friendly way I'd love to hear that too.
Thank you.
Edit:
I was able to fix my issue by creating a pipe which sanatizes the html before adding it to an iframe.
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(url: string) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
And then you can just pass your html into the iframe.
<iframe width="100%" height="1000" frameBorder="0" [src]="url | safe"></iframe>
This is useful to me since I have some old pages that use all sorts of jquery and style etc. This works as a quick fix to have them show up.
Angular2 rewrites the styles added to a component by including the dynamically added attributes like _ngcontent-yle-18 into the CSS selectors.
Angular2 uses this to emulate shadow DOM style encapsulation. These attributes are not added to dynamically added HTML (for example with innerHTML).
Workarounds
add styles to index.html because these styles are not rewritten by Angular2
set ViewEncapsulation.None because then Angular doesn't add the encapsulation emulation attributes
use /deep/ to make Angular2 ignore the encapsulation emulation attributes
See also Angular 2 - innerHTML styling
You should wrap your css into an object and use ngStyle to bind it to your component rather than the styles attribute, because styles does not support data binding.
Example:
htmlInput: string = "<h1>Why Does Angular make this so hard?</h1>";
cssInput: string = "{h1 { color:red; }}"
Parent Component HTML:
<app-html [html]='htmlInput' [css]='cssInput'></app-html>
Your HTML Component:
import { Component, Input, OnInit } from '#angular/core';
#Component({
selector: 'app-html',
template: '<div [innerHtml]="html" [ngStyle]="css"></div>',
styles: []
})
export class HtmlComponent implements OnInit {
#Input() html: string = "";
#Input() css: string = "";
ngOnInit() {
}
}