How to use use string function in Angular Interpolation Tag

Question

How to use string function in Html angular interpolation tags

In component file somevalues = [1,2,3,4,5]

Html File:

<div *ngFor="let x of somevalues; let i = index">
  {{x}} - {{i}}
  <!-- {{ String.fromCharCode(65 + i) }} -->
</div>

I would like to get results somewhat like this:

1 - 0 A
2 - 1 B
3 - 2 C
4 - 3 D
5 - 4 E

I know I could do this by writing a function in Component file, but I'm looking make this work in html itself — Chenna
– Chenna, Commented Jan 3, 2019 at 7:40
In this case, you can not use interpolation (only a few operations are allowed). As you say, the only way is make a function in your .ts, e.g. getChar(value:number){return String.fromCharCode(65+value)} and use as interpolation {{getChar(i)}} — Eliseo
– Eliseo, Commented Jan 3, 2019 at 7:45

yannick · Accepted Answer · 2019-01-03 07:43:13Z

5

You can create a referecne of the String object in your component like:

export class AppComponent  {
 name = 'Angular';
 somevalues = [1,2,3,4,5]
 stringRef = String;
}

and then you can use this reference in the template

{{ stringRef.fromCharCode('A'.charCodeAt(0)+i) }}

answered Jan 3, 2019 at 7:43

yannick

7251 gold badge11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SiddAjmera · Accepted Answer · 2019-01-03 07:49:32Z

2

If you don't want to use most of the functions from String, you could simply create a function in your Component Class:

getFromCharCode(index) {
  return String.fromCharCode('A'.charCodeAt(0) + index);
}

And call it from your Template:

<div *ngFor="let x of somevalues; let i = index">
  {{x}} - {{i}}
  {{ getFromCharCode(i) }}
</div>

Here's a Working Sample StackBlitz for your ref.

answered Jan 3, 2019 at 7:49

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges