Angular is a TypeScript based front–end open–source Web Application Framework led by the Angular Team at Google and also by a community of individuals and corporations. Angular is a complete rewrite of Angular JS. The latest stable version of Angular is Angular 8. But you know it is one of the most evolving front-end frameworks and our irctc.co.in website was changed to Angular recently.
There are a lot of expectations for the next version of Angular since it’s going to have a new Compiler called Ivy Renderer. And also there are a lot of changes involved in Angular 9. ng-Conf is one of the world’s largest angular conference which takes place every year. And recently they have released an Angular 9 Cheat Sheet which involves the changes that are going to apply in Angular 9.
In this blog, we’ll see some of the changes that are going to happen in Angular 9.
Angular Cheats
ngForm replaced with ng-Form
The selector ngForm has been replaced with ng-Form and it can be easily replaced in all your occurrences of your respective application.
You have to manually do this change since ng update won’t do this respective change.
//Previous Version
<ngForm #myForm=”ngForm”>
//Angular 9
<ngForm #myForm=”ng-Form”>
Template Only Variable Errors
From Angular 9, it will throw you an error when you assign values to template-only variables like,
*ngFor = “let item of items” //item undefined
So hereafter, you also need to define the variables which are used in the templates to the necessary scripting file.
Template Class Binding Fixes
This is one of the interesting changes which has been done in Angular 9. Inline class binding and [class] bindings now work together. In the previous versions, when the template is rendered, it will pick the last binding and it will render the respective view.
Consider the following example,
<p [class]=”‘bold'” class=”{{‘red’}}”>
Welcome to TechMeet360!
</p>
So if you see the above code snippet, it will render the HTML which contains “red” class and not the bold class. But from Angular 9, it will render the HTML that will be both “bold” and “red”.
Module With Providers
From Angular 9, you need to specify a generic type but it was optional in the previous version.
//Previous Versions
@NgModule({….})
export class TestModule{
static forRoot(randomConfig: RandomConfig): ModuleProviders{….}
}
//Angular 9
@NgModule({….})
export class TestModule{
static forRoot(randomConfig: RandomConfig): ModuleProviders<SomeModule>{….}
}
And you don’t have to do these changes manually as ng update takes care of making these changes for you.
@Component and @Directive Host Binding directive
In previous versions, only the properties with explicit field decorators like @HostBinding will be inherited but in Angular 9 you would be able to inherit the @Component and @Directive decorators.
@Component({
selector: ‘myComponent’,
template: ‘<h2></h2>’,
host:{
[key: string]: string;
}
})
TS Compiler options
In angular 9 CLI, a new flag has been introduced called –strict which is used to create your applications extremely powerful by maintaining safety. And also if you want to use this flag for your existing applications, turn on the below flags in order to resolve the existing issues.
- noImplicitAny
- noImplicitReturns
- noImplicitThis
- noFallThroughCasesInSwitch
- strictNullChecks
Removed API’s
Most of the unused API’s have been removed and some have been deprecated.
More info => https://next.angular.io/guide/updating-to-version-9#new-removals-of-deprecated-apis
Conclusion
These are some of the changes that are going to happen in Angular 9. It’s one of the major releases and it may happen by end of this December. Recently Igor Minar tweeted about the status of Angular 9.
We are in the final stages of polishing the Angular v9 release with Ivy on by default. We received lots of great feedback so far from ppl that tried the RC. If you’d like to help work out the last kinks please test the RC: https://t.co/Du8txIpiGz thanks!
— Igor Minar (@IgorMinar) November 26, 2019
And also in ng-Conf 2019 keynote, they mentioned that the hello world application size changes from 151 kb to just 14 kb. Yes! it is evolving!
Eagerly Waiting for this release!
Who else?
Happy Coding!
Cheers! 🙂
REFERENCE: ng-Conf angular 9 Pre Release Cheat Sheet
