Math functions in angular2 bindings

Question

Is there a way to use math functions in angular2 bindings?

example

<div class="partition-panel">
                <b class="pull-left">{{Math.round(variable/12*2)}}</b>
                <b class="pull-right">{{Math.round(variable/12*2)}}</b>
 </div>

when try to use this i got error

Cannot read property 'round' of undefined

Also the similar question is answered for angular1

The problem is, from the template you only have access to the local scope of your Component, so you either have to define a helper method or assign window.Math to a member variable like Adrien suggested. — Maximilian Riegler
– Maximilian Riegler, Commented Nov 16, 2016 at 13:16

Anis Abboud · Accepted Answer · 2023-11-05 07:49:11Z

89

You can try this :

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{Math.round(number)}}</h2>
    </div>
  `,
})
export class App {
  Math = Math;
  number = 2.5;
}

DEMO

edited Nov 5, 2023 at 7:49

Anis Abboud

1,3782 gold badges16 silver badges24 bronze badges

answered Nov 16, 2016 at 12:58

Adrien BARRAL

3,6041 gold badge27 silver badges37 bronze badges

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

2 Comments

RSinohara Over a year ago

This worked, but I had to move the declaration to the component whose template needed Math.

39ro Over a year ago

You should be also able to avoid init Math on the constructor and simply write: Math: Math = Math;

Anis Abboud · Accepted Answer · 2018-10-29 11:30:31Z

13

For rounding numbers in Angular templates, you can use the DecimalPipe: {{ value | number }}

See all the rounding options in https://angular.io/api/common/DecimalPipe

For all the built-in pipes, check https://angular.io/api?type=pipe

answered Oct 29, 2018 at 11:30

Anis Abboud

1,3782 gold badges16 silver badges24 bronze badges

3 Comments

Simplicity's_Strength Over a year ago

This should be the accepted answer as it makes use of pipes instead of using functions in template bindings. Also less code needed than declaring Math as a variable.

bigstones Over a year ago

Careful though, as the rounding done by the pipe is different for negative numbers.

vlz Over a year ago

There are no real rounding options though. This only rounds "to-nearest" per the docs and does not replace floor() or ceil().

Collectives™ on Stack Overflow

Math functions in angular2 bindings

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related