Do some basic arithmetic between a string and number in html with angular

Question

I know there must be a simple solution to this that I can't figure out.

I have an array of objects that contain these two values:

team.seed: number,
team.placement: string

team.placement will either be a simple string like 7, indicating a team made 7th place. It can also be something like 10T, meaning they tied for 10th place.

I'm creating a table that should print out all the differences between the initial seed and the final placement:

<tr *ngFor='let team of team_array'>
    <td>{{team.placement - team.seed}}</td>
</tr>

This works fine if placement does not have the trailing T, but prints a NaN value if it does. How can I handle placement so that I can get a numerical value in each case?

kswang · Accepted Answer · 2021-01-27 06:14:57Z

2

You can parse team.placement to number first,
try
paresInt(team.placement)

answered Jan 27, 2021 at 6:14

kswang

15810 bronze badges

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

5 Comments

Eliseo Over a year ago

you can use also the +, like {{+team.placement - team.seed}}

bmorgs Over a year ago

parseInt(team.placement) works, but I'd like to keep the string value as well, as I use the full string elsewhere in my code.

bmorgs Over a year ago

I was hoping there is a way that I can call a function that runs for every <td> that is created. Something like <td value=getPlacementInt(team.placement)>{{value - team.seed}}</td>

kswang Over a year ago

How about create a custom Pipe? see https://angular.io/guide/pipes

kswang Over a year ago

Or, in your component, declare a member parseInt = window.parseInt. Then you can just use {{ parseInt(team.placement) - team.seed }} in your template

Collectives™ on Stack Overflow

Do some basic arithmetic between a string and number in html with angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related