CSS style sample code for how to display content in Angular4

This article mainly introduces you to the relevant information about the CSS style of how to display content in Angular 4. The article introduces it in great detail through sample code. It has certain reference and learning value for everyone's study or work. Friends who need it follow the instructions below. Let’s learn together. 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. When a value is inserted into the DOM from the template through attributes (Properties), DOM element attributes (Attribte), CSS class bindings, or interpolation expressions, 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>

[innerHTML]="htmlSnippet"

This attribute can identify HTML tags but not the attribute values ​​in the tags

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:

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

<p [innerHTML]="content"></p>

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

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);
 }
}

Introduce pipe HtmlPipe into the required module

@NgModule({
 declarations: [
 HtmlPipe
 ]
})

Add the pipe name in innerHtml

<p [innerHTML]="content | html"></p>

This will display the CSS style of content.

Related recommendations;

Angular gets the json file defined in the project

What are the built-in methods of angularjs

Introduction to using AngularJS to complete the form validation function

The above is the detailed content of CSS style sample code for how to display content in Angular4. For more information, please follow other related articles on the PHP Chinese website!