Step 11: Template Functions Issue

The Problem

Using functions in templates forces Angular to execute them on every change detection cycle, which can significantly impact performance.

Issues:

  • Functions executed on every change detection
  • No way to memoize results
  • Performance degrades with more items
  • Unnecessary calculations

Problematic Code:


// Template with function calls
<div class="card">
  <h3>{card.title}</h3>
  <p>Price: {formatPrice(card.price)}</p>
  <p>Discount: {calculateDiscount(card.price)}</p>
</div>

// Component class
formatPrice(price: number): string {
  console.count('formatPrice called');
  return price.toFixed(2);
}

calculateDiscount(price: number): string {
  console.count('calculateDiscount called');
  return (price * 0.1).toFixed(2);
}
          

Open the console and scroll the page or hover over elements. Notice how both the count functions and price formatting functions are called repeatedly during normal interaction.

Total Images: 50

Total Value: $2604.16

Card 1

Card 1

Price: $81.47

Discount: $8.15

Card 2

Card 2

Price: $64.14

Discount: $6.41

Card 3

Card 3

Price: $76.35

Discount: $7.64

Card 4

Card 4

Price: $0.51

Discount: $0.05

Card 5

Card 5

Price: $93.69

Discount: $9.37

Card 6

Card 6

Price: $28.15

Discount: $2.82

Card 7

Card 7

Price: $93.95

Discount: $9.40

Card 8

Card 8

Price: $52.60

Discount: $5.26

Card 9

Card 9

Price: $78.30

Discount: $7.83

Card 10

Card 10

Price: $68.49

Discount: $6.85

Card 11

Card 11

Price: $31.19

Discount: $3.12

Card 12

Card 12

Price: $35.07

Discount: $3.51

Card 13

Card 13

Price: $42.20

Discount: $4.22

Card 14

Card 14

Price: $47.66

Discount: $4.77

Card 15

Card 15

Price: $97.44

Discount: $9.74

Card 16

Card 16

Price: $71.21

Discount: $7.12

Card 17

Card 17

Price: $50.55

Discount: $5.06

Card 18

Card 18

Price: $76.00

Discount: $7.60

Card 19

Card 19

Price: $17.92

Discount: $1.79

Card 20

Card 20

Price: $55.72

Discount: $5.57

Card 21

Card 21

Price: $21.33

Discount: $2.13

Card 22

Card 22

Price: $60.94

Discount: $6.09

Card 23

Card 23

Price: $53.48

Discount: $5.35

Card 24

Card 24

Price: $14.28

Discount: $1.43

Card 25

Card 25

Price: $5.54

Discount: $0.55

Card 26

Card 26

Price: $7.37

Discount: $0.74

Card 27

Card 27

Price: $38.19

Discount: $3.82

Card 28

Card 28

Price: $55.69

Discount: $5.57

Card 29

Card 29

Price: $5.21

Discount: $0.52

Card 30

Card 30

Price: $55.58

Discount: $5.56

Card 31

Card 31

Price: $37.84

Discount: $3.78

Card 32

Card 32

Price: $82.16

Discount: $8.22

Card 33

Card 33

Price: $57.14

Discount: $5.71

Card 34

Card 34

Price: $76.92

Discount: $7.69

Card 35

Card 35

Price: $0.55

Discount: $0.05

Card 36

Card 36

Price: $40.37

Discount: $4.04

Card 37

Card 37

Price: $54.64

Discount: $5.46

Card 38

Card 38

Price: $67.16

Discount: $6.72

Card 39

Card 39

Price: $90.92

Discount: $9.09

Card 40

Card 40

Price: $72.25

Discount: $7.22

Card 41

Card 41

Price: $79.15

Discount: $7.92

Card 42

Card 42

Price: $66.47

Discount: $6.65

Card 43

Card 43

Price: $53.14

Discount: $5.31

Card 44

Card 44

Price: $82.90

Discount: $8.29

Card 45

Card 45

Price: $26.82

Discount: $2.68

Card 46

Card 46

Price: $53.52

Discount: $5.35

Card 47

Card 47

Price: $38.93

Discount: $3.89

Card 48

Card 48

Price: $33.95

Discount: $3.40

Card 49

Card 49

Price: $12.83

Discount: $1.28

Card 50

Card 50

Price: $96.27

Discount: $9.63