What’s new in Angular 12?
Every six months, a new major version of the Angular framework is released to the public. Angular 12 is the latest iteration released in May 2021. Let’s take a look at the different changes and improvements made to Angular with this latest version.
CSS improvements: Sass and Tailwind!
Sass can now be used inline in the styles field of the @Component decorator. If you wish to enable that behavior, you have to add "inlineStyleLanguage": "scss” to your angular.jsonconfig file.
Tailwind CSS is also now supported by Angular CLI natively, which means that if you want to add Tailwind support, you can:
1. Install Tailwind with npm install -D tailwindcss
2. Create a TailwindCSS configuration file in your workspace or project root
And that’s it! You can now use Tailwind classes in your entire project.
Angular DevTools browser extension
While Augury has been around for a few years as a browser extension for debugging Angular applications, Angular 12 came about with the Angular DevTools — a Chrome DevTools extension that you can use to inspect the structure of your application and profile its performance.
The first tab of the Angular DevTools is a component tree view that showcases all component inputs, outputs, and class properties:
Note that it is possible to edit component properties “manually” in the dev tools to see the results live in the browser. A quick and easy way to test multiple different scenarios in your application!
The second tab is a profiler. The profiler can record different use-cases of your application and see the impact of such scenarios on your application performance.
The best part of the profiler is that it tells you how much time is spent in which component/directive every step of the way, which is a great way to troubleshoot performance issues.
New Typescript version + Nullish Coalescing operator in Angular templates
Angular 12 is now using TypeScript 4.2, which means that you can benefit from all the improvements of that version of the language.
Also, the Nullish Coalescing operator or ?? presented earlier in my 5 Typescript tricks for Angular is now available in our Angular HTML templates.
This means that a complex expression like this one:
{{ value!== null && value !== undefined ? value : defaultValue }}Can now be simplified into:
{{ value ?? defaultValue }}Under the hood
The legacy ViewEngine is now deprecated. This means that libraries using View Engine will still work with Ivy apps with no work required by developers, but library authors should start planning to transition to Ivy.
Webpack 5 is also fully supported in Angular 12.
Finally, IE11 support is now deprecated and will be removed with Angular 13.
And that is it for Angular 12! You can also check out the official announcement on the Angular blog for more details.
My name is Alain Chautard. I am a Google Developer Expert in Angular, as well as consultant and trainer at Angular Training where I help web development teams learn and become comfortable with Angular.
If you enjoyed this article, please clap for it or share it. Your help is always appreciated.
