Everything you should know about Angular 7 – newest Release by Google

It was the just the farewell of 2018 when Google announced the release of Angular 7, just 6 months after the much-hyped release of Angular 6.

The newest version of angular arrived with some significant changes and new features. However, you can safely assume that the buzz this time is mainly because of the improvements in Angular Material 7 platform and in Angular CLI 7.

In addition to that, Google has introduced new features like Scrolling, Drag, CLI prompts, Drop, Virtual etc. for the existing tool chain. Excited to know more? Without any further ado, let’s explore what’s new with Angular 7.

The Hype of angular 7

As per the release plan of the Angular team, they publish a major release every 6 months. This pattern continued and ng7 was released on Oct 18, 2018. In this version, the Angular team has mainly worked on the build size and performance. And continuing the recent trend from previous versions, upgrading is now a breeze (and faster than ever).] Let’s throw some light on the new features and as well as the tooling changes of ng7.

CLI Prompt

Angular team always tries to improve the development tools and the new CLI features are no exception.

Let’s assume one example here. With earlier versions, if you were running the command ng new or ng add, and suddenly you realised that you have missed adding route. Then you would have to terminate the process as early as you can and restart. But in the new CLI prompt, you don’t have to worry about this.

When you run ng new then the CLI automatically prompts, do you want to add route? And the process waits until you select one of the given options (y / N). After that, you can also select the stylesheet format. The CLI will let you select between CSS, SCSS, SAAS and LESS.

				
					$ ng new ng7-starter
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ http://sass-lang.com   ] 
  SASS   [ http://sass-lang.com   ] 
  LESS   [ http://lesscss.org     ] 
  Stylus [ http://stylus-lang.com ]

You can also handle this configuration in a file, by simply adding schematic.json using schematic CLI.

				
					"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
}

Performance

With the Angular team’s focus on the performance, Angular 7 is the highest performing version till date. For example, sometimes, you could add reflect-metadata polyfill by mistake. In the ng7 upgrade, ng team specially addressed this. So if you upgrade your application to ng 7 then you don’t have to wprry about that. Reflect-metadata will be automatically removed in production, but as usual stay in the JIT mode.

After making a production build, do you always check the bundle size? Forget about that, in ng7 your application will warn if the bundle size limit will cross 2MB and you’ll get error if it cross 5MB and you can also configure these size limits in angular.json.

				
					"budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]

Angular Material & the CDK

As a frontend developer, I assume you are always on the top of how the website looks and feels for your users. So, likely, material is high in your list of UI frameworks. In 2018, Angular material has received a big update. In ng7, angular material has a minor visual difference. To keep the user experience same, after updating angular-cli and angular-core, you can run the following command to update the angular material –

				
					$ ng update @angular/material

Let’s throw some light on the newly introduced awesome CDK features.

Virtual Scrolling:

Suppose in your website you have to show a list of a million records. If you load the list at a time and put everything into the DOM at very beginning then your website will hang a lot. And it will be very slow for the end user. So how will you overcome from this problem? If you are using ng7 then the answer is simple – virtual scrolling. With the help of virtual scrolling your DOM will load only those record which is available on the viewport. So you will not be bothered if there is million record or trillion. Cheers!

To use virtual scrolling, at first import ScrollingModule in app.module.ts

				
					import { ScrollingModule } from '@angular/cdk/scrolling';

Then add the following code snippet into your HTML and TS file respectively

				
					<cdk-virtual-scroll-viewport class="example-viewport" itemSize="15" style="height: 500px">
		<li *cdkVirtualFor="let item of items;
		      let index = index;
		      let odd= odd;
		      let even= even;
		      let first= first;
		      let last = last" class="example-item" [ngClass] = "{'even-div-color' : even, 'odd-div-color' : odd, 'special': index!=0 && index%5 == 0}">{{item}}
			<span *ngIf="first">(List starts)</span>
			<span *ngIf="last">(List ends)</span>

   		</li>
	</cdk-virtual-scroll-viewport>

				
					ngOnInit() {
     this.items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
  }

Drag and drop:

Ng7 CDK completely supports the drag-drop feature and CDK also automatically renders both the arrays, (one is moveItemInArray and another is transferArrayItem). To use drag and drop feature, at first import DragDropModule in app.module.ts

				
					import { DragDropModule } from '@angular/cdk/scrolling';

Then add the following code snippet into your HTMl and TS file respectively

				
					<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
	<div class="example-box" *ngFor="let task of tasks" cdkDrag>{{task}}</div>
</div>

				
					tasks = [
    'Task I - Morning walk',
    'Task II - Complete blog writing',
    'Task III - Go to office',
    'Task IV - Attend meeting',
    'Task V - Lunch',
    'Task VI - Attend seminar on ng7',
    'Task VII - Go to gym',
    'Task VIII - Complete presentation',
    'Task IX - Dinner',
    'Task X - Read blog'
  ];

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

To know the implementation details, click here.

Migrating from ng2+ to ng7

Upgrading ng

So, are you excited to upgrade your application from ng2+ to ng7? Here is a quick run down of how you can upgrade your application to ng7 within minutes.

First navigate to your Angular 6 app directory (where package.json is present) and run the following command:

				
					$ ng update @angular/cli @angular/core

You should see the following after this:

				
					All your packages are now updated to Angular 7.

You can verify it via the package.json file.

Build and run the application to see if it is running properly, after the upgrade. If you face any issues, visit update.angular.io for detailed information and guidance on updating your application.

Installing CDK

First, we need to install the angular cdk package and import the DragDropModule module. Install the module via npm:

				
					$ npm install @angular/cdk@latest

Once the module is installed, run ng serve command to check the application is running properly or not. You may get the following error while running the ng serve command

You seem not to be depending on “@angular/core” and/or “rxjs”. This is an error.

To fix this, first run npm link and then run ng serve command.

Final Words

So, you can clearly see how Angular 7 seems to be quite a robust solution. It mainly focuses on the newest tech trends. It is believed that Angular 7 and upcoming new updates will provide more power to developers to build better apps.

No wonder it is going to rule 2019. So, if you’re considering a tech for building apps which not only updates but robust, think of Angular 7.

For more updates, stay tuned!