What's new in Angular version 12?🔥

Hello Everyone 👋

Angular version 12 was officially released yesterday with some cool features. In this article we are going to see the two new features from Angular 12 release.

1. Sass support in Component Inline Style

2. Nullish Coalescing in Angular Template

SASS In Component Inline Style

Problem: In the previous Angular versions, Sass features was restricted to use only when it is used in an external .scss file. It was not possible to use Sass feature when used as an inline styles in the styles field of the @Component decorator.

To explain with the scenario, you can see from the below code, a new variable called $color-red is created & assigned it to h1 color property.

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';
}

Ideally, the h1 content should have shown in the red color. But, it is not. That's the problem till Angular version 11.

Here's the output from browser:

Solution: Starting in Angular version 12, Angular components will now support inline Sass in the styles field of the @Component decorator.

With the above same code, if you run the application in the Angular v12, it will show the h1 content in red color.

Note: If you are upgrading from Angular v11 to v12, set "inlineStyleLanguage": "scss” to angular.json file. If you are creating a new Angular v12, this will be available by default.

Nullish Coalescing in Angular Template

The nullish coalescing operator (??) was limited to use only in the typescript class files. In the previous version of angular, it was not possible to use this operator in the Angular template.

Starting from Angular version 12, it can be used in the html templates as well. 👏

Previously, one has to use below syntax to know if the value is null or undefined.

{{amount !== null && amount !== undefined ? amount : 0 }}

Now, it can be simplified as,

{{amount ?? 0 }}

I hope it was useful. Thanks for reading it!

Comments

[Rami]

Thanks for sharing 👍
+= Strict mode is the default starting version 12+