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
Price: $36.34
Discount: $3.63
Card 2
Price: $44.12
Discount: $4.41
Card 3
Price: $2.55
Discount: $0.25
Card 4
Price: $29.70
Discount: $2.97
Card 5
Price: $55.46
Discount: $5.55
Card 6
Price: $21.74
Discount: $2.17
Card 7
Price: $28.15
Discount: $2.82
Card 8
Price: $48.45
Discount: $4.84
Card 9
Price: $80.10
Discount: $8.01
Card 10
Price: $58.78
Discount: $5.88
Card 11
Price: $60.65
Discount: $6.06
Card 12
Price: $4.33
Discount: $0.43
Card 13
Price: $91.04
Discount: $9.10
Card 14
Price: $51.15
Discount: $5.12
Card 15
Price: $35.11
Discount: $3.51
Card 16
Price: $87.43
Discount: $8.74
Card 17
Price: $4.73
Discount: $0.47
Card 18
Price: $67.49
Discount: $6.75
Card 19
Price: $12.17
Discount: $1.22
Card 20
Price: $42.83
Discount: $4.28
Card 21
Price: $6.05
Discount: $0.61
Card 22
Price: $69.18
Discount: $6.92
Card 23
Price: $11.81
Discount: $1.18
Card 24
Price: $81.66
Discount: $8.17
Card 25
Price: $19.99
Discount: $2.00
Card 26
Price: $76.32
Discount: $7.63
Card 27
Price: $50.38
Discount: $5.04
Card 28
Price: $80.62
Discount: $8.06
Card 29
Price: $32.96
Discount: $3.30
Card 30
Price: $50.75
Discount: $5.08
Card 31
Price: $63.87
Discount: $6.39
Card 32
Price: $50.98
Discount: $5.10
Card 33
Price: $42.16
Discount: $4.22
Card 34
Price: $97.00
Discount: $9.70
Card 35
Price: $71.24
Discount: $7.12
Card 36
Price: $72.44
Discount: $7.24
Card 37
Price: $41.11
Discount: $4.11
Card 38
Price: $59.25
Discount: $5.92
Card 39
Price: $6.94
Discount: $0.69
Card 40
Price: $85.66
Discount: $8.57
Card 41
Price: $24.39
Discount: $2.44
Card 42
Price: $79.39
Discount: $7.94
Card 43
Price: $11.16
Discount: $1.12
Card 44
Price: $68.84
Discount: $6.88
Card 45
Price: $57.59
Discount: $5.76
Card 46
Price: $62.87
Discount: $6.29
Card 47
Price: $76.58
Discount: $7.66
Card 48
Price: $18.79
Discount: $1.88
Card 49
Price: $67.98
Discount: $6.80
Card 50
Price: $71.01
Discount: $7.10