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”
toangular.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!
Top comments (2)
Thanks for sharing 👍
+= Strict mode is the default starting version 12+
Some comments may only be visible to logged-in visitors. Sign in to view all comments.