#signals
β Link: https://medium.com/@stefanoslignos/angular-composables-d0383563a2b3
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
π1
β³οΈ How to Replace RxJS with Signals
#angular #rxjs #signals
β Link: https://blog.bitsrc.io/angular-16-is-out-now-learn-how-to-replace-rxjs-with-signals-c1f6f410809
#angular #rxjs #signals
β Link: https://blog.bitsrc.io/angular-16-is-out-now-learn-how-to-replace-rxjs-with-signals-c1f6f410809
π1
π Angular v16 : Game Changer
#angular #signals
β Link: https://sagarsnath.medium.com/angular-v16-game-changer-ba03af064e9e
#angular #signals
β Link: https://sagarsnath.medium.com/angular-v16-game-changer-ba03af064e9e
π Replace Getters with Signals
#angular #signals
β Article link: https://blog.herodevs.com/goodbye-getter-hello-signals-12da633e15a2
#angular #signals
β Article link: https://blog.herodevs.com/goodbye-getter-hello-signals-12da633e15a2
π₯1
π Angular Signals Through Real-world Use Cases
#angular #signals
β Article link: https://javascript.plainenglish.io/understanding-angular-signals-through-real-world-use-cases-2a84664dfcd0
#angular #signals
β Article link: https://javascript.plainenglish.io/understanding-angular-signals-through-real-world-use-cases-2a84664dfcd0
π2
π Change Detection in Angular
#angular #signals #cdr
4. Local Change Detection π©Angular 17
β Article link: https://medium.com/ngconf/local-change-detection-in-angular-410d82b38664
#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
π Declarative way of working with signal effects
#angular #signals #effect
β Article link
#angular #signals #effect
...This approach simplifies the reactive component state management in Angular applications, making the code more declarative and easier to maintain...
β Article link
π2
This media is not supported in your browser
VIEW IN TELEGRAM
π Angular Signals: untracked function
#angular #signals #untrackted
π© > Angular 17
β Article link
#angular #signals #untrackted
untracked allows reading the value of a signal without making such signal a dependency of our computed signal or effect.
In this example, increasing the counter doesnβt trigger a new computation of info. Only a new name does so
name = signal('Angular');
counter = signal(0);
info = computed(
() =>
`The name is now "${this.name()}" and the
counter value was ${untracked(this.counter)} when
the name changed.`
);π© > Angular 17
β Article link
π4
π2
#angular #signals #computed #effect
Computed Signals: Derived Signal
Function: Computed signals represent values derived from other signals. Think of them as formulas that take existing signals as inputs and produce a new output value.
Creation: You define them using the computed function, specifying a derivation function that outlines how the computed value is calculated.
Benefits:
Lazy Evaluation: Computed signals are calculated only when their value is needed. This avoids unnecessary computations.
Memoization: Subsequent reads of the computed signal with the same dependencies return the cached value, improving performance.
Dependency Tracking: Angular automatically tracks which signals a computed signal depends on. When any of those signals change, the computed signal is automatically recalculated.
Effects: Actions Triggered by Signal Changes
Function: Effects are functions that execute in response to changes in signals. They typically perform side effects like logging, interacting with external APIs, or updating local storage.
Creation: You create effects using the effect function. This function can optionally accept a onCleanup function for managing long-running operations.
Benefits:
Reactivity: Effects automatically run whenever their dependent signals change, ensuring your application stays up-to-date.
Asynchronous Execution: Effects run asynchronously during change detection, preventing them from blocking the main thread.
β Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
β€1