🩷 How to avoid subjects and middle services between different components

#angular #signals #inject #guide

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.

✅ Article link

🖤🩷 Angular: Initialize SignalStore from Resolver

#angular #signals #resolver

✅ Article link

🌐 Signals communication between components

#angular #signals #guide

✅ Article link

🌐 💘 Lightweight NGRX signalStore with Angular. Complete guide

#angular #signals #signalStore #guide

What is NGRX signalStore?

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.

✅ Article link

🩷 How to rewrite component inputs to signals correctly

#angular #signals

✅ Article link

🩶 Media query matcher in Angular with RxJS, signals and NgClass

#angular #signals #service #matchMedia

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.

✅ Article Link