What's new in Angular v12 | Everything you need to know about Angular 12

Angular is Open source TypeScript Base Framework that is used to build Single Page Applications. Angular keep on adding new features day by day now it has come with some amazing feature that are added in Angular v12 or we can say in the Angular latest version. Angular released new version that is v12 on 13 May 2021.

Here are the list of newly added features to Angular 12:

1.Angular latest version now defaults to production mode while running ng build. This can help extra steps and may help to prevent developer build in production.

2.Strict mode is now by default enabled in v12 angular latest version that can help you catch bugs ahead of time and strict mode can help you reduce bundle size budget.

3.The Language Service moved opt-in to defaults in angular v12 that helps you by providing amazing features such as errors, code completions, hints and navigation in angular templates.

4.In Angular 12 now releassing WebPack 5 supports in production ready version that was added experimental supports in v11.

5.TypeScript supported version 4.2 is now include

Smarter Type Alias Preservation
Leading/Middle Rest Elements in Tuple Types
Stricter Checks For The in Operator
--noPropertyAccessFromIndexSignature
abstract Construct Signatures
The --explainFiles Flag
Improved Uncalled Function Checks in Logical Expressions
Destructured Variables Can Be Explicitly Marked as Unused
Relaxed Rules Between Optional Properties and String Index Signatures
Declare Missing Helper Function
Breaking Changes

6. Angular v12 now supports inline Sass in styles attribute of @component.

To enable this feature consider including "inlineStyleLanguage": "scss” to angular.json.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello world from {{title}}</h1>`
  styles: [
  `
  $color-red: red; // declaring a Sass variable
  h1 {
    color: $color-red; // using the Sass variable here
  }
  `
  ]
})
export class AppComponent {
  title = 'angular';
}

7.Tailwind CSS which is a NPM package now supports in Angular v12. In v11 tailwind.config.js considered creating to initialize in angular now supports in default.

8. node-sass package is now replaced by sass NPM package , node-sass is not maintained and will not be a feature to SASS language.

9.Angular v12 now updated new SASS API by updating the angular application with ng-update

10.Nullish Coalescing : There is no need to define Nullish Coalescing separately for null and undefined value. Simply use this

{{name !== null && name !== undefined ? name: someExpression() }}

becomes: 

{{ name ?? someExpression() }}

11. VIew Engline is deprecated and will be removed in future releases.

12. View Engine will still work with IVY Application in angular.

13.Angular v12 now Supports APP_INITIALIZER to work with observables

Summary

In this section, Angular is a huge platform as it is a complete solution to any kind of web development problem today, With new this releases in Angular 12 , we can make more use of SASS files as it is default in Angular now. Along with this we have gone through all of Angular new features in version 12.Let me know which one who liked the most by commenting!

Angular change detection strategy simply well explained

The best 11 tips to boost angular application performance

Some mind blowing tips and trick 2021

6 JavaScript Array function every developer should know

Implement Server side rendering using Angular Universal

Can i Learn Angular or React without using JavaScript