Menu
I have a pipe that returns a html string, however the string outputs escaped presumably as a default for security. I'm sure there must be an option to allow html instead but cant find it when I search docs.
How can I tell the pipe to allow actual html to render?
338
“A pipe is a way to write display-value transformations that you can declare in your HTML. It takes in data as input and transforms it to a desired output”.
use date pipe in component ts files In laterst version of Angular i.e., from version 6 we can directly use angular pipes's public methods inside the components to format the values. For example we use date pipe format method formatMethod in component file by importing it from the @angular/common as shown below.
Pipes let you combine multiple functions into a single function. The pipe() function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence.
Use bindings to innerHTML or outerHTML to render already escaped html. For example <span [innerHTML]="someString | toHtmlPipe"></span>. See this plunk:
@Pipe({ name: 'wrapBold' }) class WrapBold { transform(content) { return `<b>${content}</b>`; } } @Component({ selector: 'my-app', pipes: [WrapBold], template: ` <div> Hello <span [outerHTML]="content | wrapBold"></span> </div> ` }) export class App { constructor() { this.content = 'Angular2' } } I don't know if that is possible with a pipe. (It is, see @alexpods's answer.)
Have you considered converting your pipe into a component with an input property? I.e., whatever is feeding your pipe, make that an input property of the component. Put the HTML that the pipe generates into the component's template.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
