Angular 9 New Features

Introduction

 

In this article, let’s take an overlook on the features of Angular 9. Angular has come a long way, it has now reached a peak level of admiration and loved by web developers, and on the horizon, we have a new version (Angular 9). This version makes system building much easier. Honestly, this release mostly includes bug fixes but there are some new cool features too.

 

Here let’s discuss the new features of Angular 9 as mentioned below.

 

Angular 9 New Features

• Updated Ivy compiler
• Angular ng Form
• Module with Providers
• Dependency Injection in Angular core
• Service Worker Updates
• i18n Improvements
• Template Class Binding Fixes
• @Component @Directive host Binding Inheritance
• Testbed. Inject.

Updated Ivy- renderer

• The major update of Angular 9 is an updated lvy compiler with Angular 9 lvy standard renderer. It is very much useful in solving more bundle sizes and increases performance.
• Comparing lvy compiler with Angular8, the Ivy is in experimental mode behind an optional flag. But here in Angular 9, the Ivy is the default compiler that means we can ship less code because fewer instructions are alone needed.
• Let’s take a simple example comparing both Angular8 and Angular 9

Example: In Angular 8 we need to add the below code in tsconfig.json file

  

"angularCompilerOptions": { "enableIvy": true}

 

But comparing with Angular 8 the Angular 9 Ivy will be the default renderer so that the Angular applications will be faster than the previous versions. Sound’s interesting right? And hold on there is one more to discuss

 

In Angular8 sometimes we tried to run the “NGC” command inside the node_modules folder for lvy complier. But in Angular 9 we don’t have to do it and it’s not needed

 

Advantages of lvy

 

The Major advantages of lvy renderer include the following points as mentioned below

• It is easier to read and debug at the run time.
• Since it requires only smaller builds, the re-build time is faster.
• It has improved page load size and improved template type checking.

Angular ngForm

 

In Angular 8 the ngForm is represented as mentioned below

<!-- Angular8 -->

<ngForm #providerForm="ngForm"></ngFrom>

And in Angular 9 the ng-form is represented as mentioned below

<!-- Angular9 -->
<ngForm #providerForm="ngForm"></ngFrom>

• Since the Forms Module with Config has been removed in Angular 8, we can use the Forms Module directly in Angular 9.
• The form tag selectors can be mentioned specifically in the " ng update” command which will automatically make this change.
• All your code syncs with the latest changes.

Module with Providers

 

In Angular8 the Module with Providers is a generic but optional type. But in Angular 9 the Module with Providers it’s required that you provide a generic type.

@NgModule({ ...
}) export class MyModule {
    static forRoot(config: SomeConfig): ModuleWithProviders {
        return {
            ngModule: SomeModule,
            providers: [{
                provide: SomeConfig,
                useValue: config
            }]
        };
    }
}

Now, in angular 9

@NgModule({ ...
})
export class MyModule {
    static forRoot(config: SomeConfig): ModuleWithProviders < ** SomeModule ** >
        {
            return {
                ngModule: SomeModule,
                providers: [{
                    provide: SomeConfig,
                    useValue: config
                }]
            };
        }
}

And make sure that you have run “ng update” so that it is automatically taken care of or you will need to make these changes manually.

 

Dependency Injection in Angular core

 

In Angular 9 the Dependency injection comes with a little improvement. This is not such a major change, but some support has been added to the ‘providedIn’ value of the dependency injections section. You can have an overview of the below code for the reference.

 

@Injectable({ providedIn: 'platform' }) class MyService {...}

 

Service Worker Updates

 

The service worker updates in Angular 9 has been removed. In your ngsw.config. json the file structure will look like the following.

 

The service worker updates in Angular8 will take a file structure like this

"assetGroups": [
    {
        "name": "test",
        "resources": {
            "versionedFiles": [
                "/**/*.txt"
            ]
        }
    }
]

Whereas the service worker updates in Angular 9 will take a file structure like this. Hope you guys will love it

"assetGroups": [
    {
        "name": "test",
        "resources": {
            "files": [
                "/**/*.txt"
            ]
        }
    }
]

i18n Improvements

 

The Angular framework has supported internationalization, and with the help of Angular CLI, we can generate standard codes that help to create translator files in Angular application which can be published in multiple languages.

 

Like: English, Spanish... etc.

 

The Angular team on Ivy renderer reduces the compilation time and makes compiling more easier.

 

Template Class Binding Fixes

 

In Angular 8 two classes will not work together. The illustration is as follows:

Like [class]=” ‘textLarge’” and class=” {{‘textBold’}}”
<!-- Angular8 -->
<div class="{{'textLarge'}}"></div>
<div [class]="'textBold'"></div>
<!-- Angular9 -->
<div [class]="'textBold'" class="{{'textLarge'}}"></div>

By updating similar code in you can combine two classes

 

@Component @Directive host Binding Inheritance

 

In Angular8, only properties with explicit field decorators like @HostBinding will be inherited. But now in Angular 9, the Properties like host inside @Component and @Directive decorators can be inherited.

 

In Angular8, if you extend a class, the new class would not inherit the values specified by the host. But in Angular 9, the host values will be inherited.

@Component({
    selector: provider - component ',
    templateUrl: './provider.component.html',
    styleUrls: './provider.component.css',
    host: {
        [key: string]: string;
    }
});

TestBed.inject

 

In Angular8 TestBed.get is optional. Currently TestBed.get is changed into TestBed.inject from TestBed.get in Angular 9, which only requires a generic type.

TestBed.inject(ChangeDetectorRef);

Above are the major bug fixes and new features of Angular 9. I hope this article will be helpful to you. Do comment below for any queries that you have. Looking forward to enlightening you with more interesting articles.

 

Thanks.