Ivy: The Game Changer in Angular 9
Tags: angular, productivity, webdev
Published: 2020-06-09 04:41:04

---
title: Ivy: The Game Changer in Angular 9
published: true
date: 2020-06-04 10:00:00 UTC
tags: angular, productivity, webdev
canonical_url: https://www.syncfusion.com/blogs/post/ivy-the-game-changer-in-angular-9.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/b3mpr335s4u9o9wzn47c.png
---

Even though Angular 9 has some extraordinary updates like improved ng update, support for TypeScript, and inline rendering support for YouTube and Google Maps, the default Ivy compiler has grabbed the attention of developers worldwide with its unbeatable features.

In this blog, we’ll dive into some interesting topics about the Ivy compiler:

- [Ivy: The next-generation compiler](#_Ivy-_the_next)
- [How Ivy will improve your application architecture](#_How_Ivy_will)
- [A whole new way to build Ivy apps](#_A_Whole_New)
- [Stronger type-checking in templates with Ivy](#_Stronger_Type-Checking_in)
- [The phantom of the template error](#_The_Phantom_of)

## Ivy: The next-generation compiler

Angular 9 is available with the awesome features of Ivy, the [next-generation compilation and rendering pipeline.](https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3)

Ivy is the default compiler from Angular version 9 onwards. In the previous version, the View Engine was the default compiler, which produced larger bundle sizes. Ivy uses **tree shaking** to remove unused code in applications.

The following screenshot illustrates how Ivy improves the application bundle size in Angular 9.

![Ivy size improvements](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Ivy-size-improvements.png)<figcaption>Source:<a href="https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3"> Angular blog</a></figcaption>

## How Ivy improves your application architecture

Ivy improves application architecture compared to previous versions of Angular. It enhances existing applications as follows:

- Ivy makes Angular applications simpler, smaller, and faster.
- Reduces bundle sizes from Angular 8 by an average of 30%.
- Accelerates application building and compilation.
- Smarter recompilation, resulting in 40 to 50% reduction in time to compile.
- Improved speed of [**internationalization **](https://angular.io/guide/i18n)**(i18n).**
- Easy debugging mode.
- Improved build times, with AOT enabled by default.
- Faster testing.
- Improved [**CSS class and style binding**](https://angular.io/guide/template-syntax#class-binding) **.**
- Improved strict [**type checking**](https://angular.io/guide/template-typecheck#strict-mode) **.**
- Improved build errors.

## A whole new way to build Ivy apps

[**StackBlitz**](https://stackblitz.com/) is one of the most useful online code editors for deploying Angular apps. Its most recent 2020 version provides:

- Theme support
- Auto-import support
- Zen mode
- 5x faster UI bundling
- Ivy support

The following screenshots from the official Angular site illustrate the steps to enable the Ivy compiler in StackBlitz.

- Within the **Settings** options, you will find the **Enable Ivy** It is enabled by default. [https://stackblitz.com/edit/angular-ivy-d9yoyf](https://stackblitz.com/edit/angular-ivy-d9yoyf)

![Default Enable Ivy option in Settings section](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Default-Enable-Ivy-option-in-Settings-section.png)

- Within the **json** file, you will find **enableIvy** set to **true** within **angularCompilerOptions** as shown in the following screenshot.

![enableIvy set to true in tsconfig.json file](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/tsconfig.json.png)

## Stronger type checking in templates with Ivy

Stronger template and strict type checking are enabled in Angular version 8 and above. The **strictTemplates** option provides the strongest type checking in templates. It is like the **typescript strict** flag that checks the expressions and bindings within the templates of TypeScript applications.

In the following code, **fullTemplateTypeCheck**  and  **strictTemplates**  flags in the [TypeScript configuration file](https://angular.io/guide/typescript-configuration),  **tsconfig.json** , are set to **true**.

```js
"angularCompilerOptions": 
{ 
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
```

Here are some reasons template checking is useful:

- Faster debugging
- Fewer runtime glitches
- More meaningful tests

## The phantom of the template error

Three types of template type checking are available in Ivy:

- Basic mode
- Full mode
- Strict mode

### **Basic mode**

In basic mode, the **fullTemplateTypeCheck** flag is set to **false** in the **tsconfig.json** file. It validates only the top-level expressions in a template just like the following one.

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

**Example:**

```html
<div>{{ heroes.Id }} {{ heroes.name }}</div>
```
```js
heroes: Hero = 
    { id: 10, name: "Landon" };
```

Here, type checking has been done only on **heroes** , not in the **Id**. Only the first term **heroes** is used for checking.

### Full mode

In full mode, the **fullTemplateTypeCheck** flag is set to **true** , as in the following code. Angular is more aggressive in this type checking within templates. Full mode verifies all levels to check whether an object exists.

```js
“angularCompilerOptions”: {
    “fullTemplateTypeCheck”: true,
    “strictInjectionParameters”: true
  }
```

**Example:**

```html
<div>{{ heroes.Id }} {{ heroes.name }}</div>
```
```js
heroes: Hero = 
    { id: 10, name: "Landon" };
```

Here, type checking has been done for the entire **hero.Id**. The following screenshot shows an error in the template of the component AppComponent as the property **Id** does not exist in it.

![Error showing property Id is not existing](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Error-showing-property-Id-is-not-existing.png)

### **Strict mode**

In strict mode, the **fullTemplateTypeCheck** flag is set to true. Strict mode is a superset of full mode and can be accessed by setting the strictTemplates flag to **true** like in the following code.

```js
"angularCompilerOptions": {
  "fullTemplateTypeCheck": true,
   "strictInjectionParameters": true,
    "strictTemplates": true
}
```

**Example:**

```html
<ul>
 <li *ngFor="let hero of heroes; trackBy: trackByHero">
  <div>{{ hero.Id }} {{ hero.name }}</div>
 </li>
</ul>
```
```js
heroes: Hero[] = [
  { id: 10, name: "Landon" },
  { id: 20, name: "Ella" },
  { id: 30, name: "Madelyn" },
  { id: 40, name: "Haley" }
];
trackByHero(hero: Hero) { return hero.id; }
```

While compiling the template, you will see the template type checking. As shown in the following screenshot, the error appears when you compile the template.  
 ![Error appears during template compilation](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Error-appears-during-template-compilation.png)

#### Improved CSS class and style binding

In Angular version 9, within the HTML template itself, you will be able to use style variables like in the following code example.

[https://stackblitz.com/edit/class-and-style-binding?file=app%2Fsub.component.html](https://stackblitz.com/edit/class-and-style-binding?file=app%2Fsub.component.html)

```js
<!--Class Binding -->
<h2>{{tittle1}}</h2>
<div [class.myclass]="applyclass">Apply Class</div><br>
 
<!-- Style Binding -->
<h2>{{tittle2}}</h2>
<div [style.color]="applystyle? 'blue':'orange'">Style binding</div>`
 
 
  public tittle1="This is Class Binding";
  public applyclass= true;
 
    public tittle2="This is Style Binding";
   public applystyle= true;
```

**Note:** Strict mode helps to reduce runtime errors by 15%.

## Conclusion

In this blog, we have discussed some important features and concepts of the Ivy compiler in Angular version 9 and have seen how it differs from the previous version of the Angular framework.

For Angular developers, Syncfusion provides over 65+ high-performance, lightweight, modular, and responsive [Angular components](https://www.syncfusion.com/angular-ui-components) to speed up your development.

If you are already a customer, you can download our Angular package from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out all our Angular components have to offer. You can also explore samples in our [GitHub](https://github.com/syncfusion) repository and ask any questions in the [issues](https://github.com/syncfusion/ej2-angular-ui-components/issues) section.

Please share your feedback in the comments section below. If you have any questions about Syncfusion Angular products, you can contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/). We are always happy to assist you!

The post [Ivy: The Game Changer in Angular 9](https://www.syncfusion.com/blogs/post/ivy-the-game-changer-in-angular-9.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).