Unicode characters in Angular binding

Question

There are some answers on how to display Unicode character codes in Angular bindings, but I'm trying to display one dynamically and everything seems to fail.

I have a component which receives a character code as an @Input parameter.

<my-component [icon]="e901"></my-component>

The component then attempts to show it, but neither of these work:

<i>{{ "\u" + icon  }}</i>
<i [innerHTML]="'\u' + icon"</i>
<i [innerHTML]="`\u${icon}`"</i>
<i [innerHTML]="'&#' + icon + ';'"</i>

There's a lot of room to play with the syntax but it always either results in an error or just plain displays \ue901 as a string. It does work if I hardcode the code though:

<i>{{ "\ue901" }}</i>

It doesn't matter if I generate the string in the template or TypeScript. It doesn't work if I try to pass the entire code as a parameter. Any ideas, guys?

Not sure if this helps. https://www.w3.org/TR/xml-entity-names/bycodes.html Is it this? http://www.codetable.net/decimal/901 — JGFMK, Feb 28 '19 at 14:26
This code `΅` Try it direct within the `` - without the Angular expression syntax `{{ }}` — JGFMK, Feb 28 '19 at 14:28
Let me know if it works for the binding on `[icon]` as well. That may be harder. because it's normal HTML syntax when you do `΅` — JGFMK, Feb 28 '19 at 14:37

score 7 · Accepted Answer · answered Feb 28 '19 at 14:38

7

After JGFMK pointed out half of the answer, here is the solution:

In the code:

this.icon = '&#x' + this.icon + ';';

Then in the template:

<span [innerHTML]="icon"></span>

answered Feb 28 '19 at 14:38

Tamás Polgár

1,920
4
17
42

score 1 · Answer 2 · answered Jul 28 '21 at 14:52

1

You can also use HTML code, here you can search it https://www.rapidtables.com/web/html/html-codes.html

Hope helps

answered Jul 28 '21 at 14:52

PatricioS

71
4

score 0 · Answer 3 · answered Apr 16 '22 at 14:18

0

.ts file

icon = "\u{1F601}";

.html file

<p [innerHTML]="icon"></p>

answered Apr 16 '22 at 14:18

Gvs Akhil

1,850
1
15
26

score -4 · Answer 4 · answered Feb 28 '19 at 14:32

-4

Actually it's not possible because you must access pseudo elements with Angular for what you want to achieve.

Maybe this answer will give you some hints.

answered Feb 28 '19 at 14:32

ahbon

503
4
19

Unicode characters in Angular binding

4 Answers4

Linked