In late 2017, Angular Team releases most powerful JavaScript FrameWork Angular major upgrades of Angular 4 and in the same year they released next milestone Angular 5 with minor changes to make application faster. Recently Angular team releases the Angular 6.0 stable version and will have major update from Angular 5. And it is mostly focused less on framework changes and more on tools(CLI Command and Packages) to make upgrading Angular version easily. Here we are going discuss about some new features in Angular 6.
Before start discussing about Angular 6 features just we look overview of key features released in Angular 5.

Angular 5 Key Features:

 

HttpClient:

In Angular 4.3 HttpClient within @angular/common to manage web HTTP requests powerfully. In new version, Google recommends using it’s HttpClient for all applications, and stop using the “traditional” library @angular/HTTP that is marked as obsolete.
To update to HttpClient, you’ll need to replace HttpModule with HttpClientModule from @angular/common/http in each of your modules, inject the HttpClient service, and remove any map(res => res.json()) calls, which are no longer needed.

Multiple Export Alias name for Component and Directives:

In Angular 5 we can give multiple names for your components / directives. So we can use those alias name to export. It will be very useful for migrating your code.

@Component({
 moduleId: module.id,
 selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
 exportAs: 'matButton, matAnchor',
 .
 .
 .
}

 

Internationalized Number, Date, and Currency Pipes

Angular 5 has introduced new pipes for numbers, dates and currencies that increase the standardization of the process of internationalization between browsers and for eliminating the need to use polyfills to achieve it.

Improved Decorator Support

Angular 5 now supports expression lowering in decorators for lambdas, and the value of useValue, useFactory, and data in object literals. Furthermore, a lambda can be used instead of a named function like:

Component({
 provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

 

Build Optimization:

The build optimizer removes Angular decorators from your app’s runtime codes thereby reducing the size of your bundle and increasing the boot speed of your application. This action leads to a decreased bundle size and faster application speed.
Check out detail blog post on What’s New Introduced In Angular 5

Let’s see the important Angular 6 features:-

ng update:

Google introduced new CLI command ng update <package> that will analyze the package.json and will updates the recommend version from the package manager.
It is not only update the latest version of our dependencies and also it helps to sync you dependencies but the third parties should provide the schematics. If the module providers provide the ng update schematic then ng update will automatically update the dependencies if they made changes. And it doesn’t replacing the package manager(npm/yarn) but it is using the npm and yarn.

ng add:

Another new CLI command ng add <package> use to add new 3rd party modules to our project. And it will use package manager(npm) to download dependencies and installation script(schematic script) which can update your code from package providers to sync with latest version.
Try some of the following modules:

ng add @angular/pwa — Turn your application into a PWA by adding an app manifest and service worker

ng add @ng-bootstrap/schematics — Add ng-bootstrap to your application

ng add @angular/material — Install and setup Angular Material and theming and register new starter components into ng generate

 

Angular Elements:

Angular 6 introduced us to Angular elements. And it will render as your native web elements, and they’re interpreted as trusted HTML elements.
Below command will add Angular elements:

ng add @angular/elements

And it also allow Custom Elements to make our already existing Angular components as bootstrap.
We will discuss custom elements in different blog. You can learn more about Angular elements here : https://angular.io/guide/elements

Angular Material + CDK Components

Angular 6 comes with Material version 6. It has lot of new components and some enhancements in already existed components. The biggest addition is tree component(mat-tree) to show hierarchical data. Angular Material offering the same experience with Material Design styles on top.
With the tree, Angular Material 6 comes with badge and bottom-sheet components. Badges help display small bits of helpful information, such as unread item counts. Bottom-sheets are a special type of mobile-centric dialogs that come up from the bottom of the viewport, commonly used to present a list of options following an action.
And also Angular Material 6 is coming with new 3 start-up screens.

Angular Material Starter Components:

After running the ng add @angular/material command, material will added to your application then you can also able to generate 3 new starter components.

1. Material Sidenav

Run: ng generate @angular/material:material-nav –name=my-nav
It will create starter component with toolbar, app name and the side navigation

2.  Material Dashboard

Run: ng generate @angular/material:material-dashboard –name=my-dashboard
It will create a starter dashboard component containing a dynamic grid list of cards.

3. Material Data Table

Run: ng generate @angular/material:material-table –name=my-table
It will create starter data table component.

CLI Workspaces:

CLI 6 is providing support for workspaces. So we can have multiple projects, such as multiple applications or libraries. Here after CLI will user angular.json instead of .angular-cli.json for build and project configuration.
Each CLI workspace has projects, each project has targets, and each target can have configurations.
Exmaple:

{
 "projects": {
   "my-project-name": {
     "projectType": "application",
     "architect": {
       "build": {
         "configurations": {
           "production": {},
           "demo": {},
           "staging": {},
         }
       },
       "serve": {},
       "extract-i18n": {},
       "test": {},
     }
   },
   "my-project-name-e2e": {}
 },
}

 

Library Support

In Angular 6 CLI we can create our own library in our existing workspace. Following commends will used to generate own library.
ng generate library <name>
It will create folder with module and component files inside projects folder with give libary name like projects/<name>. Learn more about library here(https://github.com/angular/angular-cli/wiki/stories-create-library).

Support RxJS v6

Angular 6 has upgrade to RxJS v6. RxJS 6 brings improvements in modularity, a boost in performance and easier to debug call stacks.

What about lvy renderer?

Ivy is a new backward-compatible “Angular renderer” to increase the speed, reduce the size of codes, and increase flexibility of app by making app size smaller. Ivy is not released with Angular but angular team promises that it will be rolled in as soon as possible.
Those are new features introduce in Angular 6.

How to update?

The Angular 6 update generally will follow three steps.

1. Update @angular/cli
2. Update your Angular framework packages
3. Update other dependencies

Making update easier to developer Angular team provides a web page https://update.angular.io/ which comes with instruction to upgrade for different version. 
Recently our team conducted a tech twitter chat with Angular experts and developers to know what is the impression about angular 6 and we will share their opinions in our next blog soon. Stay tuned! and in case if you’re a newbie then don’t forget to subscribe us to get the latest updates from diverse technologies. If you are looking for angular developers for your project ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via info@agiratech.com