Upgrade Angular 6 app to Angular 7 with Visual Studio 2017

Angular 7 is out!! It’s another major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchronized major versions. Earlier I posted about creating an Angular 6 app with Visual Studio 2017 using ASP.NET Core 2.1 SPA templates. Now, it’s time to upgrade the same angular app to the latest version which is Angular 7. This post talks about how to upgrade Angular 6 app to Angular 7 with Visual Studio 2017 and we’ll also see an example of Angular 7 Drag and Drop Feature.

Upgrade Angular 6 app to Angular 7

​

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here. The book is updated to Angular 7.

Before we upgrade the angular 6 app to angular 7, let me briefly explain you about new features of angular 7.

What’s new in Angular 7

• Angular 7 now supports Typescript 3.1, RxJS 6.3 and Node 10.
• While creating a new Angular application, the Angular CLI prompts users to add features like routing or SCSS support. The ng new capability asks for routing and what type of styles to use, while ng add @angular/material asks for a theme, gestures, and animations.
• Angular 7 will automatically remove reflect-metadata polyfill from your polyfills.ts file, as it is only meant for development, not for production.
• Angular 7 now uses Angular CLI Bundle Budget feature.
  

  Budgets is a feature in the Angular CLI which allows you to set budget thresholds in your configuration to ensure parts of your application stay within boundaries which you set.

  New applications will warn when the initial bundle is more than 2MB (default value) and will error at 5MB. This budget feature is configurable and easy to change in your angular.json.

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

• Angular Material & the CDK also received some major updates. The two newly added features of CDK are Virtual Scrolling and Drag and Drop.
  1. 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.

  2. 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 lists (transferArrayItem).

• The CLI documentation has been integrated into the main Angular Docs docs.
• Angular Elements now supports content projection using web standards for custom elements.

  <my-custom-element>This content can be projected!</my-custom-element>
  

Upgrade Angular 6 app to Angular 7

The upgrade to angular 7 from 6 is easy and it can be completed in one command. Thanks to the work done around tooling in Angular 6. To upgrade to Angular 7, 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. 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 issue, visit update.angular.io for detailed information and guidance on updating your application.

Implement Angular 7 Drag and Drop Feature

As mentioned earlier, Angular 7 supports drag and drop feature which allows you to create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, custom drag handles, previews. Take a look at below GIF to get an idea about Drag and Drop feature.

• 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 to not be depending on “@angular/core” and/or “rxjs”. This is an error.”.

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

  npm link
  ng serve
  

• Next, import the DragDropModule module. To do that , open app.module.ts and make the highlighted code changes.

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http';
  import { RouterModule } from '@angular/router';
  import { DragDropModule } from '@angular/cdk/drag-drop';
  
  import { AppComponent } from './app.component';
  import { NavMenuComponent } from './nav-menu/nav-menu.component';
  import { HomeComponent } from './home/home.component';
  import { CounterComponent } from './counter/counter.component';
  import { FetchDataComponent } from './fetch-data/fetch-data.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      NavMenuComponent,
      HomeComponent,
      CounterComponent,
      FetchDataComponent
    ],
    imports: [
      BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
      HttpClientModule,
      FormsModule,
      DragDropModule,
      RouterModule.forRoot([
        { path: '', component: HomeComponent, pathMatch: 'full' },
        { path: 'counter', component: CounterComponent },
        { path: 'fetch-data', component: FetchDataComponent },
      ])
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• Add the following HTML in home.component.html file.

  <h2>Angular 7 Drag and Drop example</h2>
  <div class="box" cdkDrag>Drag me around!</div>
  <br />
  <div cdkDropList (cdkDropListDropped)="onDrop($event)">
    <div class="box" *ngFor="let item of items" cdkDrag>{{item}}</div>
  </div>
  

  Few points worth mentioning here:

  • You can create draggable component by using the cdkDrag directive.
  • You can add cdkDropList elements to constrain where elements may be dropped.
  • Adding cdkDropList around a set of cdkDrag elements groups the draggables into a reorderable collection. Items will automatically rearrange as an element moves. Note that this will not update your data model; you can listen to the cdkDropListDropped event to update the data model once the user finishes dragging.
• Next, add these following CSS class in the style.css file. These classes styles the elements and provides animation while dragging and dropping.

  .box {
    border: 1px solid black;
    padding: 20px;
    width: 200px;
    background-color:lightblue;
  }
  
  .cdk-drop-dragging .cdk-drag {
    transition: transform 500ms cubic-bezier(0, 0, 0.2, 1);
  }
  
  .cdk-drag-animating {
    transition: transform 550ms cubic-bezier(0, 0, 0.2, 1);
  }
  
  .cdk-drag-placeholder {
    background-color: Highlight;
  }
  

• Finally, open home.component.ts and place the highlighted code.

  import { Component } from '@angular/core';
  import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
  })
  export class HomeComponent {
    items = ['First', 'Second', 'Third', 'Fourth'];
  
    onDrop(event: CdkDragDrop<string[]>) {
      moveItemInArray(this.items, event.previousIndex, event.currentIndex);
    }
  }
  

  As you can see in the code snippet above, the drag and drop CDK comes with a function moveItemInArray. This function rearranges the items array according to the indexes. The onDrop event is called, when the item is dropped.

That’s it. Run the app and you should be able to drag and drop the object as shown in the earlier image earlier.

You can read more about Drag and Drop CDK here.

Summary

To conclude, this post briefly talk about the new features of Angular 7 and also shows how to upgrade Angular 6 app to Angular 7. As the Angular 6 has improved the better tooling for the upgrading process, the upgrade to angular 7 is easy and quick. If you face any issues while upgrading, let me know in the comments section.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then