logo

let’s make something together

Give us a call or drop by anytime, we endeavour to answer all enquiries within 24 hours on business days.

Find us

PO Box 16122 Collins Street West
Victoria 8007 Australia

Email us

info@domain.com
example@domain.com

Phone support

Phone: + (066) 0760 0260
+ (057) 0760 0560

What's new in Angular 9? Top New Features and Ivy

  • By Manigandan
  • February 10, 2020
  • 277 Views

Today, we will explore the top features available in Angular 9. Every latest version of Angular is expected once in 6 months. The Angular latest versions bring efficient changes and additions to the popular framework. This means the code style has nothing to change, but, the updated version offers bug fixes. The release of Angular 9 updates that span across the entire platform.  Including the framework, Angular Material, and the CLI
Angular 9 is a major release because it contains a new renderer for Angular – called “Ivy”. Ivy makes Angular apps smaller and faster. Let’s get to know more about Ivy in Angular. 

New Features In Angular 9

  • Angular compiles with Ivy by default
  • Angular CLI apps compile in AOT mode by default
  • The latest version includes template type checking. If you’ve only used JIT before you many see new type errors in an instant.
  • No support for Typescript 3.1 and 3.5. You have to update to Typescript 3.7

What’s new in Ivy?

  1. Enabling AOT on by default.
  2. Minimized compile bundle sizes.
  3. Improved CSS class  & style binding.

1. Enabling AOT on by default

The angular 9 version app has default enabled  AOT. So that Users who only built with JIT before may see new type errors. You can see the config in angular.json file like below. “aot”: true

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular9",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [],
            "styles": [],
            "scripts": []
          }
}

2. Minimized compile bundle sizes

In angular 9 has compiled bundle size is minimized with vendor & style sizes as shown in the images below. 
ng serve
angular 9

3. Improved CSS class  & style binding

In the HTML template itself, you will be able to use style variables.

<div [style.--border-color]=" '#ff0000' ">
  <p style="border: 1px solid var(--border-color)">hi</p>
</div>

The previous versions of angular do not support this functionality. In that div element, there is one border-color variable and it is used within this div. You can take a look at the below output. 
angular-9-border

Template Type checking

Angular 9 checks the expressions and bindings within the templates of your application and can report any type of errors it finds instantly. Currently, there are three types of modes. This version has newly introduced Strict mode

  1. Basic mode available in a8
  2. Full mode
  3. Strict mode

Basic mode,  fullTemplateTypeCheck flag set to false, in the tsconfig.json file Angular. It validates only top-level expressions in a template just like this one here.

"angularCompilerOptions": {
    "fullTemplateTypeCheck": false,
    "strictInjectionParameters": true
  }

For example 

<app-user [city]="user.address.city"></app-user>

Type checking only on user.address, not in the city. Only the first term “user” is used for checking.
In the Full mode,  fullTemplateTypeCheck flag is set to true, Angular is more aggressive in its type-checking within templates.

"angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
<app-users [userName]="user.dob"></app-users>

Full mode verifies all levels whether the object exists or not. It is not shown below error.
full-mode-error
Strict mode is to maintain the behavior of the fullTemplateTypeCheck flag set to true, and it introduced as “strict mode”. Strict mode is a superset of full mode and is accessed by setting the strictTemplates flag to true. 

"angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "strictTemplates": true
  }
<app-users [userName]="user.name"></app-users>

You can look at the user object in the below snippet. 

 public user = {
    name: 122,
    age: 30
  };

User-component used is,

@Input() userName: string;

While compiling you will get the template type checking. As you can see in the image, the instant error appears while you compile the command. 
strict-mode-error
Finally, Getting on template element in ngOninit(), In Angular 8, @viewchild(), must have the static property set to false or true. But now in Angular 9, if you want to change ngOnInit(), then we have to specify the static property set to true.

 @ViewChild('name', { static: true }) nameElement:
ElementRef<HTMLInputElement>;

Angular 9 has bought benefits for smaller and high-performance applications. This version will offer a better developing experience for the community. Angular developers now have more clear project structure and clear syntax.
Tell us which of these new features in Angular you find useful? Feel free to drop your doubts in the comments.
Looking to start your Angular project? Get started by Hiring Angular developers from Agira and meet your business requirements with our intuitive technology solutions. Get in touch with our technology experts now!

Turn your vision to magnificent reality With
Our Web and Mobile Solutions
Manigandan

Manigandan

An ideal Full Stack Developer, having around 5+ years of experience in web development arena, expertise in AngularJS, Nodejs, PHP and also scoring 6 years of experience in Networking & Window servers. A perfect all-rounder has fondness to play diverse role. he always strives to match perfection and likely remains the best in whatever role he takes.

Leave a Reply

Your email address will not be published. Required fields are marked *

14 − 7 =