Google released the popular Angular web framework in September 2016 under the MIT License. Angular is a typescript-based open-source web app framework and is a part of the popular MEAN stack.

The Angular community comes up with a major release every six months and on 12th May 2021. The long-term support LTS for Angular 11 will end within a year. And until then it will be active for critical fixes and security patches.

In this article, we will discuss what’s included in version 12 of Angular unveiling the new features of Angular 12 and changes that the Angular team has brought along.

we have been hearing of the Ivy all around in the Angular space. Now, is when we can see moving towards the goal. Angular 12 moves closer to an “Ivy everywhere” vision for the framework. Ivy is described as a next-generation compilation and rendering pipeline, offering faster AOT (ahead of time) compilation.

Feature of Angular 12

Here is the list of top Angular 12 new features that you need to know to upgrade your App to Angular 12.

Move closer to ivy

The big announcement of deprecating the View Engine is out, and hence, none of the future major releases will have it. If your existing libraries are using View Engines, do not worry, because your libraries will work fine with Ivy applications as well.

Angular developers have nothing to fret about here, but yes the Angular library authors need to start working upon the Ivy transition and the Angular community’s post will help them.

Switch from i18

We no more need to be cautious about using the legacy message ID formats like whitespaces, ICU expressions, and format templates. Angular 12 has brought a more resilient and intuitive ID format that will minimize the invalidation and retranslation cost.

Though all the new projects since Angular v11 were auto-configured to the new message ID. Now, with Angular 12 we’ve got the essential tools to migrate the translations.

The Future of Protractor

The Angular team has been working with the community to determine the future of Protractor. We’re currently reviewing the feedback shared in the RFC. We’re still figuring out the best future for Protractor. We’ve opted to not include it in new projects and, instead, provide options with popular 3rd party solutions in the Angular CLI. We are currently working with Cypress, WebdriverIO, and TestCafe to help users adopt alternative solutions. More information to come as this develops.

Nullish Coalescing

Typescript developers out there might have already been excited about this particular Angular 12 feature. The nullish coalescing operator (??) has been helping developers write cleaner code in TypeScript classes.

Now, in templates, developers can use the new syntax to simplify complex conditionals. For example:

{{age !== null && age !== undefined ? age : calculateAge() }}

Becomes:

{{ age ?? calculateAge() }}

Learning angular

Google always strives to improve the developers’ learning experience, and because of the same reason, you will find some change in the Angular 12 documentation with an edition of the content projection guide.

Also, there’s a contributor’s guide that helps the developers improve their project documentation. More to this, ever since the Angular 11 release, the community shares useful ways to debug guides and videos.

Improvements of style

The best part of Angular 12 features is this amazing thing- they’ve added support for inline SaaS in styling fields and component decorators. Earlier, developers could only avail SaaS from external mediums because of the limitations of the Angular compiler.

You can add the support by using the SCSS or you should add the following command: “inlineStyleLanguage”: “scss” in your json file.

Talking about the Tailwind CSS, Angular v11.2 had already enabled the support for styling. Another noteworthy update is that Angular Material and Angular CDK have adopted the new SaaS module, for which you’ll have to download the saas npm package and switch from node-saas.

The new SaaS API comes with the @use syntax, which makes it more useful and has meaningful naming conventions. As you update your web app to Angular 12 features, you will be automatically switched to the new SaaS API.

Deprecating support for IE11

Angular is an evergreen platform, meaning that it stays up-to-date with the evolving web ecosystem. Removing support for legacy browsers allows us to focus our efforts on providing modern solutions and better support to developers and users.
We are going to start including a new deprecation warning message in Angular v12 — and remove support for IE11 in Angular v13.

Some more of the new Angular 12 features

Here are additional features in Angular 12:

• Prevention of accidental development builds with executing ng build

• CLI strict mode-by default

• Mandate implication of the Ivy-based language support

• Experimental support- Webpack 5

• Support for typescript v 4.2

Conclusion

Angular community for constantly improving our Angular experience by their contributions and support. Which feature are you most excited about for v12? Comment on this post and let us know.

For more Article : Click Here