Angular: display unicode characters from API text in innerHTML

Question

API :

{
  "id": 1,
  "text": "<p>\r\n    \\u2022\r\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit: <br />\r\n    sed do eiusmod <br />\r\n    tempor incididunt ut <br />\r\n    labore et dolore magna aliqua\r\n</p>\r\n<p>\r\n    \\u2022\r\n </p>"
}

HTML :

<div [innerHTML]="agreementData.text"></div>

when I try to display like this Unicode characters like \u2022 display same as \u2022, it doesn't convert in anything, I cant change API I need to handle requests like this

Answer 1

found solution pipe:

@Pipe({
    name: 'unicodeStringFormat',
})
export class UnicodeFormatPipe implements PipeTransform {
    transform(value: any, args?: any): any {
        return value.replace(/\\u[\dA-Fa-f]{4}/g, match => {
            return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
        });;
    }
}

HTML:

<div [innerHTML]="agreementData.text | unicodeStringFormat"></div>