Angular Redirect Function 💡
An interesting new feature was released in Angular v18: you can now configure a redirect function inside your route configurations.
The redirect function gives you access to the queryParams and allows you to inject dependencies into the redirect function. By providing greater flexibility and access to route context, this update empowers developers to create more dynamic and context-aware redirects, ultimately improving the overall user experience in Angular applications.
An interesting new feature was released in Angular v18: you can now configure a redirect function inside your route configurations.
The redirect function gives you access to the queryParams and allows you to inject dependencies into the redirect function. By providing greater flexibility and access to route context, this update empowers developers to create more dynamic and context-aware redirects, ultimately improving the overall user experience in Angular applications.
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!