CODEWITHSUNDEEP
angulartypescriptangular6
yogitha c
yogitha c

Reputation: 121

Handling quotes and trademark symbols in front end

I have a Angular 6 application where I need to display the items from API. Sometimes name of the item in the API response will be having trademark symbols in Unicode format and sometimes it will be having in inch symbols.

Ex1: "name": "7\" x 14.25\" Folding ..."
Ex2: "name": "Living\u2122 by Universal ..."

I tried to decode the name using decodeURIComponent(JSON.parse('"' + name.replace('"', '\\"') + '"')); in typescript. It works very well in case of Trademark symbol (Ex2) but fails in the case of Ex1. How to solve it?

Upvotes: 0

Views: 794

Answers (2)

nsajdok
nsajdok

Reputation: 109

You can use innerText directive

<span [innerText]="ex1"></span>

or create a pipe for sanitizing by using DomSanitizer which is more flexible if you can receive names with html also.

import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}

  transform(value: string) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

Usage:

<div [innerHtml]="ex1 | safeHtml"></div>
<div [innerHtml]="ex2 | safeHtml"></div>

Take a look on Stackblitz example

Upvotes: 1

Ininiv
Ininiv

Reputation: 1325

Try to use [innerHTML] property E.g.,

name:string = "7\" x 14.25\" Folding ...";
<p [innerHTML]="name"></p>

Upvotes: 0

Related Questions