Angular Ivy

                                                Angular Ivy

Angular Ivy is a new rendering engine that was introduced in Angular version 9. It is designed to provide better performance and reduce the size of the generated code. Ivy is a significant improvement over the previous rendering engine, known as View Engine.

The main advantage of Angular Ivy is its ability to generate smaller bundle sizes. This is achieved through improved tree shaking, which removes any unused code from the final bundle. This helps to reduce the amount of data that needs to be downloaded by the client, leading to faster load times and better performance.

In addition to smaller bundle sizes, Ivy also provides better support for lazy loading. Lazy loading is a technique that loads only the parts of an application that are needed, rather than loading the entire application at once. This can help to improve the performance of the application, particularly on slower connections.

Another important feature of Angular Ivy is its support for incremental compilation. This means that the compiler only recompiles the parts of the application that have changed, rather than recompiling the entire application. This can help to reduce the amount of time it takes to build and deploy the application.

Ivy also introduces a number of improvements to the template compiler. For example, it allows for faster compilation times, as well as improved error messages and debugging tools. This can help to make it easier for developers to identify and fix issues in their code.

Finally, Angular Ivy provides a number of performance improvements when rendering components. For example, it reduces the amount of memory required to render components, and improves the efficiency of change detection. This can help to improve the overall performance of the application, particularly on larger applications with many components.

Overall, Angular Ivy is a significant improvement over the previous rendering engine in Angular. Its ability to generate smaller bundle sizes, support lazy loading, and provide better performance make it a valuable addition to the Angular framework. Developers who are looking to improve the performance and maintainability of their Angular applications should consider using Ivy in their projects.

Here is an example of how Angular Ivy can be used in an application, along with some sample code:

1. First, make sure that your Angular project is using version 9 or higher. You can check your version by running the following command in the terminal:

ng version

2. To enable Ivy, set the "enableIvy" property in the "angularCompilerOptions" section of your "tsconfig.json" file to true:

{ "compilerOptions": { "enableIvy": true } }

3. Now that Ivy is enabled, you can take advantage of some of its features, such as improved performance and smaller bundle sizes. Here is some sample code that demonstrates how Ivy can be used to optimize a component:

import { Component, Input } from '@angular/core'; @Component({ selector: 'my-component', template: ` <div *ngFor="let item of items"> {{ item }} </div> `, }) export class MyComponent { @Input() items: string[]; }

In this component, we are using the "ngFor" directive to loop over an array of items and display them in a list. To optimize this component using Ivy, we can use the "trackBy" function to tell Angular how to track changes in the list:

import { Component, Input, TrackByFunction } from '@angular/core'; @Component({ selector: 'my-component', template: ` <div *ngFor="let item of items; trackBy: trackByFn"> {{ item }} </div> `, }) export class MyComponent { @Input() items: string[]; trackByFn: TrackByFunction<string> = (index, item) => item; }

In this updated component, we are using the "trackBy" function to tell Angular to track changes in the list based on the items themselves, rather than their position in the list. This can help to improve performance by reducing the amount of DOM manipulation that needs to be done when the list changes.

This is just one example of how Angular Ivy can be used to optimize an application. As you can see, Ivy provides developers with powerful tools for improving the performance and maintainability of their Angular applications.

                               Angular 7

           First Angular App Step By Step 

Angular is a TypeScript -based open-source web application framework. Developed by Google. Angular is a platform for building mobile, desktop and web applications.

TypeScript:- TypeScript is an open-source programming language developed and maintained by Microsoft. TypeScript is a superset of JavaScript that compiles to plain JavaScript.

Development Environment Required Software:
1.Node : Node.js is an open-source, cross-platform JavaScript run-time environment that            executes JavaScript code outside of a browser.

Download Link:-  https://nodejs.org/en/download/
2. NPM: install when we install node js

3 Angular CLI : Angular CLI is a command-line interface tool that we use to initialize, develop and maintain Angular applications.

Download by Command : “npm install -g @angular/cli”

4 Visual studio code –Optional

Download Link:- https://code.visualstudio.com/download

How to check Required Software install or not?

Node js :       command        “node -v”
NPM     :       command        “npm -v”
Angular CLI: command        “ng v”

Folder structures explanations : https://angular.io/guide/file-structure

Create component ex.
ng g c employee/employee-create --spec=false

ng g c employee/employee-list --spec=false

why we use  –spec=false; and --skipTests

Routing:

const routes: Routes = [

{path:'addemployee',component:EmployeeCreateComponent},

{path:'listemployee',component:EmployeeListComponent},

];

Router Outlet :

RouterOutlet is a “placeholder” .. different component will be rendered using a router-outlet directive.

app.module.ts
he main entry point for your app. Compiles the applicationwith the JIT compiler and bootstraps the application's root ...

[routerLink]:

    <li class="list-group-item"><a [routerLink]="['/']">Home</a></li>

    <li class="list-group-item"><a [routerLink]="['/addemployee']">add</a></li>

Difference b/w src and routerLink

In Single Page Application (SPA), routerLink  will load the component into router-outlet without reloading/refreshing the page. On the other hand, clicking on a href link will refresh/reload the whole application or reset the application back to the start (state will get reset).

Bootstrap add on our Angular project:

Command : npm install bootstrap@4 jquery –save

                       @import "~bootstrap/dist/css/bootstrap.css";

After install add css file on our styles file.

DataBinding:

1.       We are creating a class like employee class for binding data

2.       We need API ex. https://localhost:4204/api/Users

3.       We need to create service file for binding data

create class command :-  ng g class employee/employee

Create  service class :- ng g service employee/employee –spec=false
ex.

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http'

@Injectable({

  providedIn: 'root'

})

export class EmployeeService {

  constructor(private http: HttpClient) {

  }

  getUsers() {

   return this.http.get('https://localhost:4204/api/Users');

  }

}

HttpClientModule need to include on app.module.ts file

import { HttpClientModule } from '@angular/common/http';

ex.

imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

Injecting service in component

constructor(private employeeService: EmployeeService)

Methods

 this.employeeService.delete(Id)
 .subscribe((data: any) =>
    { 
       console.log(data);    

    }, (err: HttpErrorResponse) => {

      console.log(err);

    })

this.employeeService.getUsers()

      .subscribe((data: any) => {

        console.log(data);

        data.forEach(element => {

          const employee = new Employee();

          employee.Id = element.Id;

          employee.Name = element.Name;

          employee.Email = element.Email;

          employee.PhoneNo = element.PhoneNo;

          this.employeeList.push(employee);

        });

      }, (err: HttpErrorResponse) => {

        console.log(err);

      })

Summary  In this article we discussed basic of angular 7 and typescript. We setup environment for create angular application. In my next article we will learn about internationalization in Angular application.