Displaying special symbols in Angular 4

Question

I am getting a value using ngModel from my back-end in a text box. This is linked to a searchable drop-down (which I populate using <p> tags and where I am using innerHtml).

If I should display registered trademark symbols in the text box, how do I do it? Any ideas? Or angular directives?

The values are getting saved in DB as HTML Byte characters from another service that I sync with (For eg., registered trademark as ®)

<div class="Top-selection">
                    <input type="text" class="" placeholder="Type here to select a brand" (blur)="checkProperData()"
                           id="brand-id" #BRAND_ID="ngModel" [(ngModel)]="cmpgnCtgry['BRAND_ID']"
                           name="BRAND_ID" (click)="showBrands(row_no)" (keyup)=filter(row_no)/>

                    <div class="filterbox width300px" *ngIf="disableShow[row_no]">
                        <div *ngFor="let brand of brandList">
                            <p [innerHTML]="brand.brandName" (click)="selectCatalogId(brand.brandName, brand.brandUniqueId, brand.brandId, row_no)">
                                {{brand.brandName}}</p>
                        </div>
                    </div>
                </div>

I am talking about the box that reads BRAND_ID here

I also tried doing the following,

var p = document.createElement('div');
                        p.textContent = this.campaign['CMPGN_DTL_TX'].CMPGN_CTGRY[i].BRAND_ID;
                        this.campaign['CMPGN_DTL_TX'].CMPGN_CTGRY[i].BRAND_ID = p.innerHTML;
                        console.log(p.innerHTML);

I really didn't understand why this wasn't working. I have implemented this in my .ts component file. Is it that logging this won't help? (It is not getting updated in the HTML either).

Also, I'm really surprised that there is no standard way of converting it to registered trademark - that we have to use regular expressions and replace < or & symbols.

please post the code snippets you are using or provide a [plunker example](https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue) :) — 0mpurdy, Jul 25 '17 at 23:37

0mpurdy · Answer 1 · 2017-07-27T22:03:10.523

0

A normal [(ngModel)] should bind any Unicode symbol correctly

template

<div>
    <input [(ngModel)]="brand" />
</div>

component

brand = "Google™©®"

Screenshot

For information on how to encode and decode HTML entities when saving to/reading from your database see these questions:

Plunker example

edited Jul 27 '17 at 22:03

answered Jul 25 '17 at 23:50

0mpurdy

3,198
1
19
28

The problem is that I am saving it from another source in the DB as html byte characters - eg., `®` instead of the trademark symbol – Ramana Sarva Jul 26 '17 at 17:31
That wouldn't work for me - when I try to sync with the model it would insert it as a trademark symbol rather than convert it back to the html code. – Ramana Sarva Jul 27 '17 at 18:07
I want to display the trademark, but in the database i want to save the html code only – Ramana Sarva Jul 27 '17 at 18:38
I did try using the `decodeURI/encodeURI` and the `decodeURIComponent/encodeURIComponent` as well. Both of them didn't change the code. I used them in my component. – Ramana Sarva Jul 27 '17 at 21:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150424/discussion-between-ramana-sarva-and-0mpurdy). – Ramana Sarva Jul 28 '17 at 16:30

Displaying special symbols in Angular 4

1 Answers1