How To Display Dynamic HTML Without Sanitizing Or Filtering Using Pipe
Posted By : Shilpa Adlakha | 28-May-2018
To display dynamic HTML in angular 5 we use the pipe to sanitize data. As Angular 2+ will remove all the attributes from the HTML tags.for this we need to create a Pipe and use it whenever we need the HTML to be as it is. When the value is inserted into the document object model from a template with the help of any of the property
Step 1: To create a pipe we Create new file to hold the pipe pipes/sanitize-html.pipe.ts:
Step 2: Now Add an import statement in your app.module.ts and add this it in declaration array.
Step 3:Now we can use the pipe in our template:
Following above steps we create pipe to show dynamic html as it is.
DOM sainitizer helps in allowing values to be safe
Methods used above are:
sanitize() :It sanitizes a value for use in the given SecurityContext.
abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
If the given value is trustfull then it will render the data directly to be used in DOM.
abstract bypassSecurityTrustHtml(value: string): SafeHtml
SafeHtml,SafeStyle,SafeScript and SafeUrl:
All the above shows a warning in which is written as that the method with untrusted user data exposes the application to security issues.
It bypasses the security and trust of the given value to be safe style value.
It bypasses the security and trusts the given value to be a safe resource URL