Angular 12 New Features
Version 12 of Angular has been released on 12-May-2021, In Angular Version 12 having the below-listed features.
1) Moving Closer to Ivy Everywhere:
View Engine is basically deprecated, it will be removed in a future major release.
Current libraries using View Engine will still work with Ivy apps (no work is required by developers), but library authors should start planning to transition to Ivy.
2) Transitioning from Legacy i18n Message IDs
Angular 12 introduces a new canonical message-id format (i.e., one format to rule them all). This format is more resilient and more intuitive.
This format will reduce the unnecessary translation invalidation and associated retranslation cost in applications where translations do not match due to whitespace changes for example.
3) Goodbye to Protractor
Angular 12 opted to not include protractor in new projects and, instead, provide options with popular 3rd party solutions in the Angular CLI. The angular team currently working with Cypress, WebdriverIO, and TestCafe
4) Nullish Coalescing
Angular 12 support using the nullish coalescing operator in Angular templates. And this is awesome! That operator has been supported in TypeScript since version 3.7.
Now, in templates, developers can use the new syntax to simplify complex conditionals. For example:
{{age !== null && age !== undefined ? age : calculateAge() }}Becomes:
{{ age ?? calculateAge() }}5) Learning Angular
Angular 12 have made below listed documentation changes
6) Sass support for inline styles
Angular 12, it is now possible to use Sass together with inline component styles.
To enable this feature in your existing applications add “inlineStyleLanguage”: “scss” to angular.json. Otherwise, it will be available to new projects using SCSS.
7) Tailwind support
Now, teams are ready to start using Tailwind in Angular
8) Angular Material & Angular CDK
Angular CDK and Angular Material have internally adopted Sass’s new module system. If your application uses Angular CDK or Angular Material, you’ll need to make sure you’ve switched from node-sass to the sass npm package. The node-sass the package is unmaintained and no longer keeps up with new feature additions to the Sass language.
Both Angular CDK and Angular Material expose a new Sass API surface designed for consumption with the new @use syntax. When updating to Angular 12, an app will automatically switch to the new API by updating via ng update.
9) TypeScript 4.2 support
Angular 12 introduces support for TypeScript 4.2
10) Webpack 5 support
The Webpack 5 module bundler is production-ready.
11) IE11 support is deprecated
Support for the IE11 browser has been deprecated.
12) Strict by default
Strict mode, to catch errors earlier in the development cycle, is enabled by default in the CLI
13) Production build by default
Running ng build now defaults to production which saves teams some extra steps and helps to prevent accidental development builds in production!
14) Language service improvements
Angular 12, the Ivy-based language service, providing capabilities such as code completions and hints inside templates, moves from opt-in to on by default.
15) Http improvements
HttpClient can now be used to store and retrieve custom metadata for requests. This is particularly useful for HTTP interceptors. This capability can be used through the new HttpContext.
The HttpParams class now has a new appendAll method, which can be used to easily add a set of parameters at once
Params can now be passed as numbers and booleans
Angular has introduced its own list of human-readable names for HTTP status codes, in the form of a const enum
if (response.status === HttpStatusCode.Ok) {
...
}The XhrFactory class has been moved to a different package. It is now exposed by angular/common instead of angular/common/http
16) Router changes
routerLinkActiveOptions directive has been enhanced. Now, it is possible to specify whether we require an exact match or not for different parts of the URL in order to add a CSS class to a link.
17) Forms Improvements
min and max validators support for template-driven forms
The emitevent option was added for FormArray and FormGroup. This is a breaking change.
How to update to get version 12
When you are ready to go run this command to update Angular and CLI:
ng update @angular/cli @angular/corePlease check URL https://update.angular.io/?l=3&v=11.0-12.0 for the more details
Credits:
Follow Me for the latest updates.
Medium: @rajaramtt
Thanks for reading, Happy coding! :) (y)