Issue
I want to dynamically change the styling of select words in a sentence (with a custom pipe) like so:
<p>{{ product.sentence | italicArray:product.italicsArray }}</p>
This creates:
Hi this is a <span><i>test</i></span> sentence
How do I enforce the span and italics tags and not display them as clear text?
Solution
We can loop through the italics array
then we use regex
new RegExp('\\b' + str + '\\b', 'g')
to get all the whole words with the match string and then wrap it around<i><i/>
We can use
DomSantizer
to sanitize the transformed data.Finally since we have HTML in the code now, we need to render it on
innerHTML
which will give us the desired output, but there is a catch, we cannot have angular events/binding since its rendering outside the angular context
Answer from Blazzze IL helped this answer do Upvote that answer!
Working example below
pipe
import { CommonModule } from '@angular/common';
import { Pipe, PipeTransform, Sanitizer, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'italicArray',
standalone: true,
})
export class ItalicArrayPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(value: string, strArray = []): any {
let output: string = value;
strArray.forEach((str: string) => {
output = <string>this.sanitize(this.replace(output, str));
});
return output;
}
replace(value: string, str: string): string {
var regex = new RegExp('\\b' + str + '\\b', 'g');
str = value.replace(regex, `<i>${str}</i>`);
return str;
}
sanitize(str: string) {
console.log(this.sanitizer);
return this.sanitizer?.sanitize(SecurityContext.HTML, str) || '';
}
}
main.ts
import { Component, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import 'zone.js';
import { ItalicArrayPipe } from './italic-array.pipe';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, ItalicArrayPipe],
template: `
<p [innerHTML]="product.sentence | italicArray: product.italicsArray"></p>
`,
})
export class App {
name = 'Angular';
product: any = {
sentence:
'Hi this is a test sentence, which is a working example, and is the final solution',
italicsArray: ['test', 'is'],
};
}
bootstrapApplication(App);
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.