🅰️ Angular tip of the day
Run logic inside the injection context with runInInjectionContext💉
If you want to use the inject function in Angular, you can only use it within the injection context. There are a few ways to get around this, like using closure, but Angular also exposes the runInInjectionContext function, which can be used to run code within the injection context even if it's not inside the injection context.
To know when to use this function you first need to know what the injection context is.
The injection context is available in these situations:
1. Construction (via the constructor) of a class being instantiated by the DI system, such as an @Injectable or @Component.
2. In the initializer for fields of such classes.
3. In the factory function specified for useFactory of a Provider or an @Injectable.
4. In the factory function specified for an InjectionToken.
Within a stack frame that is run in an injection context.
If your logic is not declared in one of these four places, you can use runInInjectionContext if you need to run it in the injection context anyway.
#Angular
Run logic inside the injection context with runInInjectionContext💉
If you want to use the inject function in Angular, you can only use it within the injection context. There are a few ways to get around this, like using closure, but Angular also exposes the runInInjectionContext function, which can be used to run code within the injection context even if it's not inside the injection context.
To know when to use this function you first need to know what the injection context is.
The injection context is available in these situations:
1. Construction (via the constructor) of a class being instantiated by the DI system, such as an @Injectable or @Component.
2. In the initializer for fields of such classes.
3. In the factory function specified for useFactory of a Provider or an @Injectable.
4. In the factory function specified for an InjectionToken.
Within a stack frame that is run in an injection context.
If your logic is not declared in one of these four places, you can use runInInjectionContext if you need to run it in the injection context anyway.
#Angular
👍1
🥷🥷 #angular Template-driven forms Best practices 🥷🥷
🚀 Ensure unidirectional dataflow 🚀
Don't use ([ngModel)] but [ngModel]
🚀 Treat your form models as completely partial 🚀
(Angular creates your form partially over time)
🚀 Don't put your validators in your templates 🚀
Use model validations with @vestjs for instance
🚀I f you need to validate multiple controls or groups, put them in a parent group 🚀
If you need to validate 2 children, put the validation on their parent, that's where the validator belongs
🚀 Use declarative ViewModels 🚀
They keep the template clean
They are more reactive than imperative actions on valueChanges
🚀 Validate your schema's with schema validation 🚀
Template-driven forms are not typesafe by default, you can throw runtime errors in development.
🚀 Ensure unidirectional dataflow 🚀
Don't use ([ngModel)] but [ngModel]
🚀 Treat your form models as completely partial 🚀
(Angular creates your form partially over time)
🚀 Don't put your validators in your templates 🚀
Use model validations with @vestjs for instance
🚀I f you need to validate multiple controls or groups, put them in a parent group 🚀
If you need to validate 2 children, put the validation on their parent, that's where the validator belongs
🚀 Use declarative ViewModels 🚀
They keep the template clean
They are more reactive than imperative actions on valueChanges
🚀 Validate your schema's with schema validation 🚀
Template-driven forms are not typesafe by default, you can throw runtime errors in development.
This week injectLazy was released 🚀
It's a utility function that helps you inject lazy imported services into your components ⚡️
It was inspired by both https://itnext.io/lazy-loading-services-in-angular-what-yes-we-can-cfbaf586d54e and https://riegler.fr/blog/2023-09-30-lazy-loading-mockable
Go give it a try and let me know in the comments what you think!
https://ngxtension.netlify.app/utilities/injectors/inject-lazy/
#angular
It's a utility function that helps you inject lazy imported services into your components ⚡️
It was inspired by both https://itnext.io/lazy-loading-services-in-angular-what-yes-we-can-cfbaf586d54e and https://riegler.fr/blog/2023-09-30-lazy-loading-mockable
Go give it a try and let me know in the comments what you think!
https://ngxtension.netlify.app/utilities/injectors/inject-lazy/
#angular
Medium
Lazy loading services in Angular. What?! Yes, we can.
We’re used to lazy loading modules or components in Angular. But what about lazy loading services? Wait, what? Yes, we can. In this…
Data Structures.
They seem tough, don't they? 😅
#javanoscript #webdev
But here's a secret.
They're not.
They're just explained in a complicated way.
I want to make it easy.
Plain.
Clear.
Simple.
Stack:
• LIFO (Last In, First Out), perfect for things like browser history.
Queue:
• FIFO (First In, First Out), used in scenarios like song playlists or print jobs.
Array:
• Ordered collection, essential for lists like blog entries or product displays.
LinkedList:
• Nodes pointing to the next, great for sequences like music playlists.
Set:
• Holds unique values, ideal for tracking distinct user preferences or inputs.
Map:
• Key-value storage, like fetching product details by ID in online shopping.
Graph:
• Nodes connected by edges, useful for mapping complex networks or social connections.
Tree:
• Hierarchical structure for data with parent-child relationships, like org charts or file systems.
Object:
• Structured key-value pairs, representing entities like user profiles.
Heap:
• Prioritizes elements, facilitating tasks like job scheduling based on urgency.
They seem tough, don't they? 😅
#javanoscript #webdev
But here's a secret.
They're not.
They're just explained in a complicated way.
I want to make it easy.
Plain.
Clear.
Simple.
Stack:
• LIFO (Last In, First Out), perfect for things like browser history.
Queue:
• FIFO (First In, First Out), used in scenarios like song playlists or print jobs.
Array:
• Ordered collection, essential for lists like blog entries or product displays.
LinkedList:
• Nodes pointing to the next, great for sequences like music playlists.
Set:
• Holds unique values, ideal for tracking distinct user preferences or inputs.
Map:
• Key-value storage, like fetching product details by ID in online shopping.
Graph:
• Nodes connected by edges, useful for mapping complex networks or social connections.
Tree:
• Hierarchical structure for data with parent-child relationships, like org charts or file systems.
Object:
• Structured key-value pairs, representing entities like user profiles.
Heap:
• Prioritizes elements, facilitating tasks like job scheduling based on urgency.
#Angular router unwrap of default import ▶️
As of Angular 15 lazy-loaded routes can automatically unwrap default exported components and modules
Simply add the default keyword after your export to transform your export into a default export, and inside your route configuration, you can use a much simpler and cleaner syntax for your lazy loaded routes 💡
As of Angular 15 lazy-loaded routes can automatically unwrap default exported components and modules
Simply add the default keyword after your export to transform your export into a default export, and inside your route configuration, you can use a much simpler and cleaner syntax for your lazy loaded routes 💡
A less-shown feature of #Angular signals.
The dependency on the multiplicator signal inside the "untrack()" isn't tracked the effect isn't triggered on changes.
The dependency on the multiplicator signal inside the "untrack()" isn't tracked the effect isn't triggered on changes.
Angular's new `defer` block is really cool.
Now you can lazy load parts of your application easily and finer granular than just over routes. The #Angular compiler creates "Lazy Chunk Files" for you with all bundled you use (components, pipes, directives...)
Now you can lazy load parts of your application easily and finer granular than just over routes. The #Angular compiler creates "Lazy Chunk Files" for you with all bundled you use (components, pipes, directives...)
The fastest and most impactful #Angular perf tip of all times!
1️⃣ Open your fav editor
2️⃣ Search (regexp) on the whole src (or projects)
3️⃣ Use \*ngFor="(\s|((?!trackBy).))*?"
4️⃣ Add trackBy: trackByIndex (or id, name, ...)
5️⃣ Enjoy (often massive) perf improvements
Please open Telegram to view this post
VIEW IN TELEGRAM
Directive Composition API
Available since #Angular v15.0.0
🔹 Streamlines directive application.
🔹 Boosts reusability & DX!
Key Points:
1️⃣ Simplified Integration:
• Use hostDirectives for easier merging of directive functionalities.
2️⃣ Encapsulation & Reusability:
• E.g., Interactive product cards now centralize logic within the component, not the template.
3️⃣ Extended Functionalities:
• Enhance apps by extending built-in directives or external libraries.
4️⃣ Advanced Interactions:
• Pass data or emit values with ease using expanded host directive declarations.
5️⃣ Compilation Phase:
• Host directives are statically applied, ensuring proper integration.
⚠️ Performance Watch:
Avoid overuse to prevent component bloat and performance issues.
Use directive composition strategically for efficient, high-performing apps. Handle with care!
Real-World Usage:
• Hover-to-zoom on product images.
• Drag-and-drop data cards.
• Click-to-expand for trip details.
• Touch-to-rotate 3D models.
Available since #Angular v15.0.0
🔹 Streamlines directive application.
🔹 Boosts reusability & DX!
Key Points:
1️⃣ Simplified Integration:
• Use hostDirectives for easier merging of directive functionalities.
2️⃣ Encapsulation & Reusability:
• E.g., Interactive product cards now centralize logic within the component, not the template.
3️⃣ Extended Functionalities:
• Enhance apps by extending built-in directives or external libraries.
4️⃣ Advanced Interactions:
• Pass data or emit values with ease using expanded host directive declarations.
5️⃣ Compilation Phase:
• Host directives are statically applied, ensuring proper integration.
⚠️ Performance Watch:
Avoid overuse to prevent component bloat and performance issues.
Use directive composition strategically for efficient, high-performing apps. Handle with care!
Real-World Usage:
• Drag-and-drop data cards.
• Click-to-expand for trip details.
• Touch-to-rotate 3D models.
❤1
⚠️ Be very careful using this! ⚠️
takeUntilDestroyed() in #Angular v16
Unsubscribing from #RxJS observable.
• Context:
Always pass destroyRef if using takeUntilDestroyed() outside an injection context.
• Injection Context:
Code running before a class (e.g., a component) is instantiated.
Examples: class constructor & class field declarations.
✅ Will Work ✅
• Using inject directly within a class field & chaining with takeUntilDestroyed().
• Using takeUntilDestroyed() within a constructor.
• Explicitly injecting DestroyRef and using it with takeUntilDestroyed().
❌ Won’t Work ❌
• Using takeUntilDestroyed() within ngOnInit without DestroyRef.
• In a Guard or Interceptor DestroyRef.onDestory() in most cases is never called. Since Injector is not destroyed.
takeUntilDestroyed() in #Angular v16
Unsubscribing from #RxJS observable.
• Context:
Always pass destroyRef if using takeUntilDestroyed() outside an injection context.
• Injection Context:
Code running before a class (e.g., a component) is instantiated.
Examples: class constructor & class field declarations.
✅ Will Work ✅
• Using inject directly within a class field & chaining with takeUntilDestroyed().
• Using takeUntilDestroyed() within a constructor.
• Explicitly injecting DestroyRef and using it with takeUntilDestroyed().
❌ Won’t Work ❌
• Using takeUntilDestroyed() within ngOnInit without DestroyRef.
• In a Guard or Interceptor DestroyRef.onDestory() in most cases is never called. Since Injector is not destroyed.
👍1