Step 12: Template Functions Fixed

The Solution

Instead of using functions in templates, we can use computed properties and signals to improve performance.

Benefits:

  • Values are cached and only recomputed when dependencies change
  • Better change detection performance
  • Cleaner template code
  • More predictable behavior

Fixed Code:


// Create custom pipes
Pipe({
  name: 'priceFormatter',
  standalone: true
}
export class PriceFormatterPipe implements PipeTransform {
  transform(value: number): string {
    return value.toFixed(2);
  }
}

// Use pipes in template
<div class="card">
  <h3>{card.title}</h3>
  <p>Price: {card.price | priceFormatter}</p>
  <p>Discount: {card.price * 0.1 | priceFormatter}</p>
</div>
          

Open the console and scroll the page or hover over elements. Notice how the pipes are only executed when their input values change.

Total Images: 50

Total Value: $2471.29

Card 1

Card 1

Price: $36.34

Discount: $3.63

Card 2

Card 2

Price: $44.12

Discount: $4.41

Card 3

Card 3

Price: $2.55

Discount: $0.25

Card 4

Card 4

Price: $29.70

Discount: $2.97

Card 5

Card 5

Price: $55.46

Discount: $5.55

Card 6

Card 6

Price: $21.74

Discount: $2.17

Card 7

Card 7

Price: $28.15

Discount: $2.82

Card 8

Card 8

Price: $48.45

Discount: $4.84

Card 9

Card 9

Price: $80.10

Discount: $8.01

Card 10

Card 10

Price: $58.78

Discount: $5.88

Card 11

Card 11

Price: $60.65

Discount: $6.06

Card 12

Card 12

Price: $4.33

Discount: $0.43

Card 13

Card 13

Price: $91.04

Discount: $9.10

Card 14

Card 14

Price: $51.15

Discount: $5.12

Card 15

Card 15

Price: $35.11

Discount: $3.51

Card 16

Card 16

Price: $87.43

Discount: $8.74

Card 17

Card 17

Price: $4.73

Discount: $0.47

Card 18

Card 18

Price: $67.49

Discount: $6.75

Card 19

Card 19

Price: $12.17

Discount: $1.22

Card 20

Card 20

Price: $42.83

Discount: $4.28

Card 21

Card 21

Price: $6.05

Discount: $0.61

Card 22

Card 22

Price: $69.18

Discount: $6.92

Card 23

Card 23

Price: $11.81

Discount: $1.18

Card 24

Card 24

Price: $81.66

Discount: $8.17

Card 25

Card 25

Price: $19.99

Discount: $2.00

Card 26

Card 26

Price: $76.32

Discount: $7.63

Card 27

Card 27

Price: $50.38

Discount: $5.04

Card 28

Card 28

Price: $80.62

Discount: $8.06

Card 29

Card 29

Price: $32.96

Discount: $3.30

Card 30

Card 30

Price: $50.75

Discount: $5.08

Card 31

Card 31

Price: $63.87

Discount: $6.39

Card 32

Card 32

Price: $50.98

Discount: $5.10

Card 33

Card 33

Price: $42.16

Discount: $4.22

Card 34

Card 34

Price: $97.00

Discount: $9.70

Card 35

Card 35

Price: $71.24

Discount: $7.12

Card 36

Card 36

Price: $72.44

Discount: $7.24

Card 37

Card 37

Price: $41.11

Discount: $4.11

Card 38

Card 38

Price: $59.25

Discount: $5.92

Card 39

Card 39

Price: $6.94

Discount: $0.69

Card 40

Card 40

Price: $85.66

Discount: $8.57

Card 41

Card 41

Price: $24.39

Discount: $2.44

Card 42

Card 42

Price: $79.39

Discount: $7.94

Card 43

Card 43

Price: $11.16

Discount: $1.12

Card 44

Card 44

Price: $68.84

Discount: $6.88

Card 45

Card 45

Price: $57.59

Discount: $5.76

Card 46

Card 46

Price: $62.87

Discount: $6.29

Card 47

Card 47

Price: $76.58

Discount: $7.66

Card 48

Card 48

Price: $18.79

Discount: $1.88

Card 49

Card 49

Price: $67.98

Discount: $6.80

Card 50

Card 50

Price: $71.01

Discount: $7.10