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
Price: $81.47
Discount: $8.15
Card 2
Price: $64.14
Discount: $6.41
Card 3
Price: $76.35
Discount: $7.64
Card 4
Price: $0.51
Discount: $0.05
Card 5
Price: $93.69
Discount: $9.37
Card 6
Price: $28.15
Discount: $2.82
Card 7
Price: $93.95
Discount: $9.40
Card 8
Price: $52.60
Discount: $5.26
Card 9
Price: $78.30
Discount: $7.83
Card 10
Price: $68.49
Discount: $6.85
Card 11
Price: $31.19
Discount: $3.12
Card 12
Price: $35.07
Discount: $3.51
Card 13
Price: $42.20
Discount: $4.22
Card 14
Price: $47.66
Discount: $4.77
Card 15
Price: $97.44
Discount: $9.74
Card 16
Price: $71.21
Discount: $7.12
Card 17
Price: $50.55
Discount: $5.06
Card 18
Price: $76.00
Discount: $7.60
Card 19
Price: $17.92
Discount: $1.79
Card 20
Price: $55.72
Discount: $5.57
Card 21
Price: $21.33
Discount: $2.13
Card 22
Price: $60.94
Discount: $6.09
Card 23
Price: $53.48
Discount: $5.35
Card 24
Price: $14.28
Discount: $1.43
Card 25
Price: $5.54
Discount: $0.55
Card 26
Price: $7.37
Discount: $0.74
Card 27
Price: $38.19
Discount: $3.82
Card 28
Price: $55.69
Discount: $5.57
Card 29
Price: $5.21
Discount: $0.52
Card 30
Price: $55.58
Discount: $5.56
Card 31
Price: $37.84
Discount: $3.78
Card 32
Price: $82.16
Discount: $8.22
Card 33
Price: $57.14
Discount: $5.71
Card 34
Price: $76.92
Discount: $7.69
Card 35
Price: $0.55
Discount: $0.05
Card 36
Price: $40.37
Discount: $4.04
Card 37
Price: $54.64
Discount: $5.46
Card 38
Price: $67.16
Discount: $6.72
Card 39
Price: $90.92
Discount: $9.09
Card 40
Price: $72.25
Discount: $7.22
Card 41
Price: $79.15
Discount: $7.92
Card 42
Price: $66.47
Discount: $6.65
Card 43
Price: $53.14
Discount: $5.31
Card 44
Price: $82.90
Discount: $8.29
Card 45
Price: $26.82
Discount: $2.68
Card 46
Price: $53.52
Discount: $5.35
Card 47
Price: $38.93
Discount: $3.89
Card 48
Price: $33.95
Discount: $3.40
Card 49
Price: $12.83
Discount: $1.28
Card 50
Price: $96.27
Discount: $9.63