Directives are powerful in #Angular.

But heavily underused!

Here is a complete list of Built-In Directives!

🔹 Common Directives 🔹

• NgClass - Toggle CSS classes.

• NgComponentOutlet - Instantiate components.

• NgFor & NgForOf - Iterate & render lists.

• NgIf - Conditional template rendering.

• NgOptimizedImage - Optimize image load.

• NgStyle - Set inline styles dynamically.

• NgTemplateOutlet - Insert from TemplateRef.

• NgSwitch, NgSwitchCase, NgSwitchDefault - Conditional content via switch.

• NgPlural & NgPluralCase - Display based on singular/plural logic.


🔹 Forms Directives 🔹

• AbstractFormGroupDirective - Base logic for form group directives.

• CheckboxControlValueAccessor - Interface between Angular forms and checkbox element.

• CheckboxRequiredValidator - Validator ensuring a checkbox is checked.

• DefaultValueAccessor - Default bridge between Angular forms and DOM.

• EmailValidator - Validator for email format.

• FormArrayName - Connects FormArray to DOM.

• FormControlDirective - Links a standalone FormControl to the DOM.

• FormControlName - Links a FormControl in an existing FormGroup to the DOM.

• FormGroupDirective - Links an existing FormGroup to the DOM.

• FormGroupName - Nested FormGroup binding logic.

• MaxLengthValidator - Validator for maximum string length.

• MaxValidator - Validator for maximum number value.

• MinLengthValidator - Validator for minimum string length.

• MinValidator - Validator for minimum number value.

• NgControlStatus - Reflects control status (valid/invalid) in the DOM.

• NgControlStatusGroup - Reflects FormGroup status in the DOM.

• NgForm - Directive that creates a top-level FormGroup instance.

• NgModel - Creates a FormControl from a domain model and binds it.

• NgModelGroup - Groups controls under one form domain model property.

• NgSelectOption - Binds select options to form controls.

• NumberValueAccessor - Binds numeric input value.

• PatternValidator - Validator for regex pattern.

• RadioControlValueAccessor - Binds radio button value.

• RangeValueAccessor - Binds range input value.

• RequiredValidator - Validator ensuring a value is present.

• SelectControlValueAccessor - Binds select dropdown value.

• SelectMultipleControlValueAccessor - Binds multi-select dropdown values.

🔹 Router Directives 🔹

• RouterLink - Navigational directive to support anchor navigation.

• RouterLinkActive - Adds classes to the element when the associated RouterLink becomes active.

• RouterLinkWithHref (Deprecated)- Binds href to the associated RouterLink.

• RouterOutlet - Placeholder directive where the router displays a view.

🔹 Upgrade/Static Directives: 🔹

• UpgradeComponent - Facilitates the use of AngularJS components in Angular templates.

🅰️ 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

🥷🥷 #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.

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

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.

#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 💡

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.

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...)