Web Technologies

Angular 7 is actually a typescript based open source full-stack web application framework which makes you to create reactive single page applications (SPA). Angular 7 is completely based on components. Let see about Angular 7 installation and new features.


Installation

  1. Install the latest version of node.js (https://nodejs.org/en/download)
  2. Install visual studio code (https://code.visualstudio.com/download)

Steps to check the installation of Node and NPM

To verify the versions of Node and NPM, you have to execute the following 2 commands using the command prompt window.

node -v
npm –v


To install Angular 7 using npm,

npm install -g @angular/cli


For Linux or Mac, we should add sudo to grant the installation permission.

sudo npm i @angular/[email protected] -g


Install Angular 7 Beta globally on the machine. Open the terminal and type the below command.

Invoke the tool on the command line through the ng executable.


Examples

ng help
ng generate --help


To create, build, and serve a new basic Angular project. The following commands are:

ng new my-first-project
cd my-first-project
ng serve


A “production” configuration is created by default when you use the CLI to create the project and you can use that configuration by specifying the –-prod option.

Commands

ng build --prod


Angular 7 Components


The most basic building block of your Angular 7 application (and this is a concept that’s not new) is the component .

  1. The html template.
  2. The styling(SASS,CSS) etc..


Features of Angular 7

  1. Virtual Scrolling
  2. Drag and drop
  3. Improved accessibility of select


Virtual Scrolling

Virtual Scrolling loads and unloads elements from the DOM based on the visible parts of a list, making it possible to build very fast experiences for users with very large scrollable lists.


Examples:

<cdk-virtual-scroll-viewport itemSize ="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>


Drag and Drop

Drag and drop support is now in the CDK and includes automatic rendering as the user moves items and helper methods for reordering lists.

(moveItemInArray) and transferring items between list (transferArrayItem).


For html,

<div cdkDropList class="list" (cdkDropListDropped)="drop($ event)">
<div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>


For ts,

drop(event:cdkDragDrop<string[]>){
moveItemInArray(this.movies,event.previousIndex,event.currentIndex);
}


Improved accessibility of select

Improve the accessibility of your application by using a native select element inside of a mat-form-field. <mat-select> is a form control for selecting a value from a set of options, similar to the native <select> element.


Performance Improvements

We inclued the reflect-metadata polyfill in production ,which is only needed in development. These default bundle size can be easily changed in your angular.json file


by changing the bundle size in the angular.json file.

"budgets":[{
"type":"initial",
"maximumwarning":"2mb",
"maximumerror":"5mb"
}]


Angular 7 Templating

<app-nav> is a component decorator , there’s a selector property bound to the value of app-nav.


Interpolation is executed by wrapping the name of a property that’s defined in the component between {{ }}.

<app-nav></app-nav>
<section>
<router-outlet></router-outlet>
</section>


Conclusion


With Angular 7, a new major release has come out, which is having many small improvements and designed by maintaining the dependencies and other performance improvements .

0