Angular 9 Cheat Sheet

|  Posted: December 12, 2019  |  Categories: Angular General

Angular is a TypeScript based frontend opensource 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.

Image result for angular memes

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.

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

Author: Suhas Parameshwara

I'm a passionate junior software developer working at BizTalk360. I like to explore about new technologies and also to enhance the knowledge of other developers by writing blogs.

Get notified about any future events

Interested in learning more about TechMeet360 or knowing about any future events? Sign up below to get notified.

Back to Top