Display CSS styles in Angular 4

This time I will bring you how to display CSS styles in Angular 4. What are the precautions for displaying CSS styles in Angular 4? The following is a practical case, let’s take a look.

Before starting the main text of this article, let’s first take a look at the relevant content of outputting tagged text on the page in angular2. In order to systematically prevent XSS issues, Angular treats all values ​​as untrustworthy by default. of. When the value is inserted into the DOM from the template through attributes (Property), DOM element attributes (Attribte), CSS class binding or interpolation expression, etc., Angular will sanitize these values ​​and encode untrusted values.

h3>Binding innerHTML</h3>
<p>Bound value:</p>
<p
class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>Result of binding to innerHTML:</p>
<p
class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>

This attribute can recognize HTML tag but not the attribute value in the tag

problem found

Everyone knows that Angular has the innerHTML property to set the content to be displayed, but if the content contains CSS styles, the effect of the styles cannot be displayed.

For example:

[innerHTML]="htmlSnippet"

Only Hello World will be displayed, and the font will not be 30px, which means the CSS style will have no effect.

solution

Customize a Pipe to convert content. Look at the code below.

Write a HtmlPipe class

public content: string = "<p style=&#39;font-size:30px&#39;>Hello Angular</p>";
<p [innerHTML]="content"></p>

Introduce pipe HtmlPipe into the required module

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
 name: "html"
})
export class HtmlPipe implements PipeTransform{
 constructor (private sanitizer: DomSanitizer) {
 }
 transform(style) {
 return this.sanitizer.bypassSecurityTrustHtml(style);
 }
}

Add the pipe name in innerHtml

@NgModule({
 declarations: [
 HtmlPipe
 ]
})

This will display the CSS style of content.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Display CSS styles in Angular 4. For more information, please follow other related articles on the PHP Chinese website!