DEV Community

loading...
Cover image for What's new in Angular version 12?πŸ”₯

What's new in Angular version 12?πŸ”₯

yuvgeek profile image Yuvaraj Originally published at yuvaraj.hashnode.dev ・2 min read

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

Enter fullscreen mode Exit fullscreen mode

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:

older-angular-sass.png

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.

new-angular-11-sass.png

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 }}
Enter fullscreen mode Exit fullscreen mode

Now, it can be simplified as,

{{amount ?? 0 }}
Enter fullscreen mode Exit fullscreen mode

I hope it was useful. Thanks for reading it!

Discussion (2)

Collapse
captaindev profile image
Rami

Thanks for sharing πŸ‘
+= Strict mode is the default starting version 12+

Collapse
manuthecoder profile image
π™ΌπšŠπš—πšžπšƒπš‘πšŽπ™²πš˜πšπšŽπš›

Hmmm...
I've read the Angular docs, and found it very confusing...
But react is fun!

Forem Open with the Forem app