Creating a Generic HTTP service with a model adapter in hashtag#Angular 🔀
Oftentimes, in Angular, the HTTP services responsible for fetching data look more or less the same; the only differences are the types and the API URLs. As a result, we end up with much repetitive code, so this is a great candidate for a base class that we inherit, a sort of generic HTTP service that can be inherited by the implementations for each domain/entity within our application that needs to communicate with an API 💡
Oftentimes, in Angular, the HTTP services responsible for fetching data look more or less the same; the only differences are the types and the API URLs. As a result, we end up with much repetitive code, so this is a great candidate for a base class that we inherit, a sort of generic HTTP service that can be inherited by the implementations for each domain/entity within our application that needs to communicate with an API 💡
💡 Dynamic Components in Angular 💡
Have you ever heard of Dynamic Components?
The concept itself is really simple - simply create a component dynamically in your class code.
This can be really handy in cases where you want to load different components based on some configuration.
In the example below, the ExternalContentComponent is a wrapper for a dynamic component based on some configuration data which it gets through the ActivatedRoute.
Such dynamic components can also often be seen on configurable dashboards.
Technically it is really simple. All you need is a HostDirective, which is an empty directive that injects the ViewContainerRef. Then the wrapper has to have a ViewChild on an element with the HostDirective and then call the createComponent function of the viewContainerRef and pass in a component.
Have you ever heard of Dynamic Components?
The concept itself is really simple - simply create a component dynamically in your class code.
This can be really handy in cases where you want to load different components based on some configuration.
In the example below, the ExternalContentComponent is a wrapper for a dynamic component based on some configuration data which it gets through the ActivatedRoute.
Such dynamic components can also often be seen on configurable dashboards.
Technically it is really simple. All you need is a HostDirective, which is an empty directive that injects the ViewContainerRef. Then the wrapper has to have a ViewChild on an element with the HostDirective and then call the createComponent function of the viewContainerRef and pass in a component.
Why switching to input signals?
One of the main reasons would be not using anymore the:
- 𝘯𝘨𝘖𝘯𝘊𝘩𝘢𝘯𝘨𝘦𝘴() hook to react to input's changes
- use 𝘤𝘰𝘮𝘱𝘶𝘵𝘦𝘥() instead
All @Input() features like 𝘵𝘳𝘢𝘯𝘴𝘧𝘰𝘳𝘮, 𝘢𝘭𝘪𝘢𝘴 or 𝘳𝘦𝘲𝘶𝘪𝘳𝘦𝘥 can be used with input signals as well.
Dany Paredes explains the main reasons for moving to the input signals -> link
One of the main reasons would be not using anymore the:
- 𝘯𝘨𝘖𝘯𝘊𝘩𝘢𝘯𝘨𝘦𝘴() hook to react to input's changes
- use 𝘤𝘰𝘮𝘱𝘶𝘵𝘦𝘥() instead
All @Input() features like 𝘵𝘳𝘢𝘯𝘴𝘧𝘰𝘳𝘮, 𝘢𝘭𝘪𝘢𝘴 or 𝘳𝘦𝘲𝘶𝘪𝘳𝘦𝘥 can be used with input signals as well.
Dany Paredes explains the main reasons for moving to the input signals -> link
🔥 Syncing Local Storage with NgRx Component Store 🔥
With this custom utility function you can easily compose your component stores with local storage syncing without the need of any third party dependencies.
NgRx Component Store
(c) Stefan Haas
With this custom utility function you can easily compose your component stores with local storage syncing without the need of any third party dependencies.
NgRx Component Store
(c) Stefan Haas
Small warning - Node v22 + Linux + typenoscript + emojis in code
Currently crashes with the above conditions due to maglev inlining (apparently) - so basically a JIT optimization hasn't been tested with emojis in strings on linux x64 and that now causes a segfault.
Tested that running:
works while omitting
Using either typenoscript@next or reverting to node@20 works around the issue!
Currently crashes with the above conditions due to maglev inlining (apparently) - so basically a JIT optimization hasn't been tested with emojis in strings on linux x64 and that now causes a segfault.
Tested that running:
node --no-maglev-inlining ./node_modules/typenoscript/lib/tsc.js
works while omitting
--no-maglev-inlining(or, you know, running
npx tsc) does produce a segfault.
Using either typenoscript@next or reverting to node@20 works around the issue!
Simplifying Local Storage Management in Angular
Local storage is a web storage API that allows you to store data locally within the browser. This data persists even after the browser window or tab is closed, making it ideal for storing user preferences, application state, or other data that needs to be accessed across sessions.
Angular Munich pinned «https://justangular.com/blog/read-this-if-you-are-building-design-system-components-in-angular»
Good video for reactive contexts. Signals vs rxjs.
https://www.youtube.com/watch?v=6AvN-Zqkrkg&ab_channel=RainerHahnekamp
In this video, we delve into the concept of Reactive Contexts in Angular and their crucial role in making Signals reactive. You'll learn:
🚦 What a Reactive Context is and why it is essential for Signals.
🚦 How the effect function creates a Reactive Context.
🚦 How a Reactive Context functions within an Angular template.
🚦 The slight differences between the effect function and template Reactive Contexts.
🚦 Why effect might get triggered more frequently than templates and why this behavior is not problematic.
https://www.youtube.com/watch?v=6AvN-Zqkrkg&ab_channel=RainerHahnekamp
YouTube
Reactive Contexts
In this video, we delve into the concept of Reactive Contexts in Angular and their crucial role in making Signals reactive. You'll learn:
🚦 What a Reactive Context is and why it is essential for Signals.
🚦 How the effect function creates a Reactive Context.…
🚦 What a Reactive Context is and why it is essential for Signals.
🚦 How the effect function creates a Reactive Context.…
👍1