Angular Gems

Advance your #Angular skills to the next level.

[Angular Gems @angular_gems]

Catch up with #Angular's latest and hottest changes (covers v14-17)

https://t.co/zrtxaq2jNa

[Daniel Glejzner @DanielGlejzner]

I still can't get used to it 😀

[NgRx @ngrx_io]

NgRx v17 is out!

NgRx Signals, Operators, Performance Improvements, Workshops, and more!

https://t.co/mVP8lDSFYC

[Angular @angular]

Take control of your templates in a new way with the introduction of the new block syntax.

> if, for, else and more

Check out our announcement!

https://t.co/CimqD7sJkk

[Brecht Billiet @brechtbilliet]

From now on my videos will have subtitles.
In this video I explain:
☘️Creating a simple #Angular form
☘️Creating a validation suite
☘️Writing conditional validators
😱With no boilerplate

Next Mondays video: Optimising the execution of validators
https://t.co/9JWLz3J5jz

[Vasileios Kagklis 🅰 @vkagklis]

This looks so clean and neat 😍

#Angular

[Angular Gems @angular_gems]

Quick preview of the new #Angular control flow syntax and early benchmark results of #Angular v17

https://t.co/8jcrLBNRLW

[Pawel Kozlowski @pkozlowski_os]

Angular v17 is FAST!

[Brecht Billiet @brechtbilliet]

I updated the #Angular "Template-driven forms with Form Arrays article" completely to Signals only without ObservableState and it got a lot simpler:
👉🏼Revised completely
👉🏼Practical phonenumbers example
👉🏼Fresh and clean StackBlitz example

https://t.co/13MsWE4tTb

[Enea Jahollari 🅰 @Enea_Jahollari]

Angular latest next release is fully packed 🔥🔥

- Signals are finally stable!
- It includes the schematics to migrate templates to the new control flow ❤️!!
- Mutate method was dropped from signals
- Customization for HttpTransferCache
- Better toSignal typings
- Diagnostic for missing Signal invocation in template

#angular
https://t.co/GRkeD26B0c

[Brecht Billiet @brechtbilliet]

🥷🥷 Do you know Angular its outer zone?🥷🥷
One of the biggest performance gains in most #Angular applications:💪💪
☘️Change Detection does not get triggered there!☘️

Every event that happens in the inner zone triggers change detection application wide! Angular runs every event in the inner zone by default ➡️ Change detection on every event!

Examples of significant performance loss:
👉🏼Host listeners on global events
👉🏼Event listeners on global events in an *ngFor
👉🏼Listening to scroll, mousemove (drag and drop) events in the inner zone
👉🏼Plugins (eg map) running in the inner zone
👉🏼Canvas that is being redrawn every 100ms in the inner zone => Change detection every 100ms

Some last intel:
Root zone is the outer zone, also called parent zone
Inner zone is ng zone, where change detection runs.
I explain Change Detection in 5 minutes here:
https://t.co/Hy7mfcp87e

[Daniel Glejzner @DanielGlejzner]

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

-------------------- 👇

If you would like me to prepare a list of custom directives. That I have used throughout my career.

Make sure to let me know with a like or comment :)

[Brecht Billiet @brechtbilliet]

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

🚀If 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.

Have a great evening everyone! 🤩🥰

[Netanel Basal @NetanelBasal]

I just published A Comprehensive Guide to Angular’s Defer Block https://t.co/NxwnMvMcNo

[Matthieu Riegler @Jean__Meche]

I wrote a short summup on the new kid on the block :
@defer

This is going to be a fantastisc tool for reducing the size of our main bundles !

https://t.co/5rKM2qsPsC

#Angular

[Matthieu Riegler @Jean__Meche]

https://t.co/hDIVN6AUvu

Breaking change for v17 !
NgSwitch will behave like @switch.

=== is the way to go.

You’ll get a nicely worded warning if this changes something for you.

[Enea Jahollari 🅰 @Enea_Jahollari]

HELLLLL YEAHHHH 🎉🎉🎉

The schematics that migrate code from directive based control flow to the new template syntax 🚀

https://t.co/D80uq6LhHW

#angular

[Aristeidis Bampakos @abampakos]

💡#Angular tip: Did you know that VSCode has a built-in Angular profile packed with popular extensions and handy settings out of the box?

🛠️VSCode profiles are a great way to share the same editor setup among your team!

https://t.co/eRHPbt2xQc

[Vasileios Kagklis 🅰 @vkagklis]

Some call it a renaissance. Others call it an attempt to reach a broader audience.

Regardless of what you call it, one thing is for sure  - a lot is going on lately in #Angular!

Here's an article to catch up with the latest changes (covers v14-17).

https://t.co/rMX95gOsD6

[Matthieu Riegler @Jean__Meche]

My favorite @-defer : on immediate

The component is lazy loaded, resides in its own chunk. But the best : A FUCKING STRAIGHT FOWARD API.

Demo here : https://t.co/Xt2DarND9O