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.

On the first screen, we have a ParentComponent that passes data to a ChildComponent, which in turn passes the data to an InnerChildComponent. This is a simple example.

On the second screen, the example will help you to remove prop drilling from your Angular applications and make your code more maintainable and easier to understand.

NgRx SignalStore is a fully-featured state management solution that offers a robust way to manage application state. With its native support for Signals, it provides the ability to define stores in a clear and declarative manner. The simplicity and flexibility of SignalStore, coupled with its opinionated and extensible design, establish it as a versatile solution for effective state management in Angular.

To achieve the desired outcome, I’ve opted for an approach that follows this pattern:

— Create a service with a `mediaQuery()` method, which returns an RxJS Observable containing information on whether a specific breakpoint is matched or not.

— Create a property inside the component class (in the example we will call it `isMobile`, since we have only one breakpoint) and bind it the the `mediaQuery()` method previously crafted, but also converting the Observable to a signal.

— Utilize the `NgClass` directive to dynamically apply a class based on the value of the `isMobile` property.