Angular 6 Features. What’s New?

Share On : [feather_share show="twitter, facebook,linkedin"

hide=”reddit, pinterest, google_plus, tumblr, mail”]

What makes Angular 6 appealing is that it is the very first release that unifies the CLI, Material and Framework.

Note that Angular 6 concentrates more on the toolchain and how to simplify to move quickly with Angular and less on the underlying framework. Furthermore, team Angular is coordinating the major versions stepping forward for the framework packages (@angular/common, @angular/core, @angular/compiler etc), the Angular material + CDK and the Angular CLI.

Now, you can effortlessly update your old packages, create native web elements using Angular Elements and many other things with Angular 6. Let’s take a look!

ng update <package>  is a new CLI command that analyzes your package.json and applies its expertise of Angular to suggest updates to your application. It assists you to adopt the right version of dependencies meanwhile keeping your dependencies in synchronization. Third parties can make use of schematics and cater update scripts.

NOTE:

ng update will not change your package manager. It makes use of yarn or npm to efficiently manage dependencies. While updating peer dependencies, it will apply needed changes to your project

ng update @angular/core

ng add <package>  is a new CLI command that assures to effortlessly allow you to add new capabilities to your project. It makes use of your package manager to download new dependencies while calling upon an installation script which is implemented as a schematic which updates your project with needed configuration changes, adds additional dependencies or stage package-specific initialization code.

ng add @angular/pwa

Angular 6 introduced us to Angular Element that concentrates on enabling you to bootstrap Angular components within your existing Angular application by recording them as Custom Elements.

You can add Angular Elements by running the command below:

ng add @angular/elements

Angular 6 got with it a new tree component which displays hierarchical data. It pursues patterns from the data-table component where the CDK resides the core tree directives. Angular Material caters the same experience with Material Design styles. Angular 6 also introduced new components like new badge and bottom-sheet components. Badge assists to display relevant information like unread item counts while bottom-sheet components represents special type of mobile-centric dialogues that pop from the bottom of viewport which is more commonly used to present a list of options following an action.

The @angular/cdk/overlay package is one of the most powerful pieces of infrastructure in the CDK today.

CLI version 6 provides support for workspaces comprising of multiple projects like multiple libraries or applications. CLI projects now will leverage angular.json instead of .angular-cli.json  for different builds and project configuration.

Making use of the latest version of RxJS library RxJS v6 welcomes a few vital changes besides a backward compatibility package rxjs-compat which keeps applications working. It has been made more tree-shakable to ensure that only pieces of RxJS that you are using are included in your production bundles.

The Angular team had back in the time announced that only v4 and v6 would be LTS releases but now they have extended LTS to ALL the major releases beginning with v4. Every major release will be actively supported for 18 months with about 6 months of active development followed by 12 months of critical bug fixes and security patches.

The new CLI command ng generate library <name> is a major support for creating and building libraries while configuring it further for testing.

In efforts to make your applications smaller, Angular 6 has moved from modules referencing services to services referencing modules. This empowers you to only bundle services into your code base in the modules where they are injected particularly.

Angular 6 has upgraded their implementation of animations where it will no longer require the web animations polyfill. This implies that you can erase this polyfill from your application and save some 47KB of bundle size while enhancing and improving performance of animations in Safari.

The update generally follows 3 steps, and will take advantage of the new ng update tool:

• Update @angular/cli
• Update your Angular framework packages
• Update other dependencies

Ivy is Angular’s next generation rendering in pipeline which is under active development and is not a part of 6.0 release.

Angular itself does not contain many innovative changes in the Angular core, but Angular-cli is undoubtedly very appealing. Team Angular is more focused on performance while seamlessly building PWAs, catering a comfortable environment to work in.