What’s New In Angular 12.2?

Angular is a popular web app development framework led by the Google team and community of individuals and corporations. Recently on 5th August 2021, Angular came with its new version which is Angular 12.2. Version 12.2 has major changes to the core and compiler of the framework. Let’s see which are those.

What’s New In Angular 12.2?

1. Forms-

There are some updates in the core of the framework like the form. The form in Angular version 12.2 has got a lot of attention with expansion of addValidators, hasValidator and removeValidators methods. You can also expect, they allow adding and eliminating a validator or a variety of validators to/from a structure control, group or array. As of now, you need to wipe out all validators and reset them when you want to add/eliminate one, which was not good for normal use-cases like making a field required depending upon a condition:

//frequency is required if auto-refresh is enabled
{
 if (isAutoRefreshEnabled) {
   this.autoRefreshFrequencyCtrl.setValidators([frequencyValidator, Validators.required]);
 } else {
   this.autoRefreshFrequencyCtrl.setValidators(frequencyValidator);
 }
 this.autoRefreshFrequencyCtrl.updateValueAndValidity();
});

With the new Angular v 12.2, simplification of such code is-

{
 if (isAutoRefreshEnabled) {
   this.autoRefreshFrequencyCtrl.addValidators(Validators.required);
 } else {
   this.autoRefreshFrequencyCtrl.removeValidators(Validators.required);
 }
 this.autoRefreshFrequencyCtrl.updateValueAndValidity();
});

These techniques have a form for offbeat validators with hasAsyncValidator, addAsyncValidators and removeAsyncValidators. Just one thing to note that hasValidator/hasAsyncValidator techniques works just with a reference to the specific validator function, hence it doesn’t work for example:

this.autoRefreshFrequencyCtrl = new FormControl(10, Validators.min(5));
this.autoRefreshFrequencyCtrl.hasValidator(Validators.min(5))
// returns false

whereas this works:

const frequencyValidator = Validators.min(5);
this.autoRefreshFrequencyCtrl = new FormControl(10, frequencyValidator);
this.autoRefreshFrequencyCtrl.hasValidator(frequencyValidator)
// returns true

Same for removeValidators/removeAsyncValidators because they use hasValidator/hasAsyncValidator within the structure.

2. Split two-way binding checks-

Next feature is using strictTemplates, regular two-way data binding does not pass type-check anymore. From Angular 12.2 onwards we don’t have to retain the data the kind of the value alloted through (xyzChange)=”prop = assignedValue and rather trust it to be the generic Event type.

3. Templates-

As ES2021 is considered in Javascript, recent release Angular 12.2 the compiler supports underscore as separator for numbers in format. You can write- 

{{ 1_000_000 }}

4. Faster ng build with esbuild-

Next new feature of Angular 12.2 is new CLI which supports esbuild that makes compilation and building of angular applications more rapid. Angular CLI 12.2 uses esbuild to optimize built code, in collaboration with terser. However fast esbuild is, it doesn’t cover all optimization like terser. Now that CLI is optimized, the code runs in two phases- one on esbuild and other on terser on optimized code from esbuild. 

Esbuild is used to optimize the CSS of component stylesheets. As it is faster than CSSNano, it generates smaller outputs. Though the global stylesheets continue to be optimized, it might migrate to esbuild in the future as well if it is supported by sourcecap.

5. Sass Deprecation Warnings-

If you’re using the scss style, you might have seen that dart-sass(that the CLI uses in the engine) shows alerts for Sass documents that are using deprecated/operator. Moreover, it yields a ton of alerts. The community is using Font Awesome in some projects, and the CLI is logging many lines. Another great news is that CLI v12.2 covers the warning for third party stylesheets. You can see them with the – verbose flag.

Also know- Top Angular Component Libraries For Development