Angular πŸ‡ΊπŸ‡¦ - practical notes
1.63K subscribers
1.6K photos
1 file
532 links
Angular - practical notes

This group is for posting practical notes for Angular developers. Mostly all posts are for quick implementation https://t.me/angular_practical_notes (Commenting on posts only in ENG and UA langs here). Welcome!
Download Telegram
πŸ“„ Change Detection in Angular

#angular #signals #cdr

4. Local Change Detection 🚩Angular 17

@Component({
selector: 'app-timer',
template: `<span>Last Updated: {{ lastUpdateInSeconds() | number:'1.0-0' }} Seconds</span> {{ logCd() }}`,
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [DatePipe, DecimalPipe, AsyncPipe]
})
export class TimerComponent {
@Input() lastUpdate = new Date();
lastUpdateInSeconds = signal(0)
constructor() {
setInterval(() => {
this.lastUpdateInSeconds.set((new Date().getTime() - this.lastUpdate.getTime()) / 1_000);
}, 1000);
}

logCd() {
console.log('log from timer');
}
}



βœ… Article link: https://medium.com/ngconf/local-change-detection-in-angular-410d82b38664
πŸ”₯1πŸ₯°1
πŸ’™ Strategies to Reduce Memory Usage

#angular #cdr #workers

Common Causes of High Memory Usage in Angular

1. Memory Leaks: Components and services not properly cleaned up can cause memory leaks.
2. Excessive DOM Manipulation: Too many DOM elements or frequent updates can increase memory consumption.
3. Large Data Objects in Memory: Keeping large objects or arrays in memory unnecessarily bloats memory usage.
4. Unoptimized Change Detection: Running change detection frequently for all components degrades performance.
5. Improper Use of Observables: Subscriptions that are not unsubscribed can lead to memory leaks.
6. Large Bundle Size: Loading too much JavaScript can impact memory consumption.


βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘3