Angular is a framework which is actively maintained by Google and it is very popular and nowadays many developers have adopted it. This framework is getting better and easier with time.

As you people already know, Angular 6 has been already released and this release makes Angular lighter, faster and easier. Developers now love it even more, as it makes their development further easy.

So, here I am going to talk about the new features of angular 6. Let’s have a look!

1. Typescript 2.7 support:

The ultimate feature of Angular is typescript. The new version of typescript(i.e v2.7) is faster and it improves response time.

2. RxJS 6:

The newest version of Angular uses the latest version of RxJS library. You can now enjoy the newest features of RxJS 6 in your Angular app. These changes provide developers with an increased performance and make it easier to debug AJAX called stacks and make improvements in modularity and also making it as backward compatible as possible. But RxJS 6 has just changed the way to import things!

In RxJS 5, you were probably writing:

import { Observable } from ‘rxjs/Observable’;

import ‘rxjs/add/observable/of’;

import ‘rxjs/add/operator/map’;

const squares$: Observable = Observable.of(1, 2)

.map(a => a * a);

In RxJS 5.5 introduced the pipeable operators:

import { Observable } from ‘rxjs/Observable’;

import { of } from ‘rxjs/observable/of’;

import { map } from ‘rxjs/operators’;

const squares$: Observable<number> = of(1, 2).pipe(

map(a => a * a));

And In RxJS 6.0 changed the imports:

import { Observable, of } from ‘rxjs’;

import { map } from ‘rxjs/operators’;

const squares$: Observable<number> = of(1, 2).pipe(

map(a => a * a));

3. Angular elements:

This package is designed to take the advantage of web components and it is supported by all modern browsers, except Edge. This package will allow you to create an angular component and publish it as a web component which can be used in any HTML page.

4. Ivy Renderer:

A rewrite of the renderer, code-named Ivy that has already garnered a lot of attention. The new renderer should be smaller which will allow for a smaller final app’s bundle size but the stable version is not available yet. It will be available as an opt-in replacement when the API is completed.

5. Closure Compiler:

Closure Compiler is the building optimizer and it is used to create Javascript modules for almost all Google web applications. This Compiler consistently generates smaller bundles and does a better job in dead code elimination.

6. Bazel Compiler:

Bazel is a compiler that is used for all software nowadays. In angular 6 we will start having the support of Bazel Compiler. When we compile the code with Bazel Compiler, we will not recompile entire code base, because it only compiles with necessary code. You do not need to rebuild the entire application for every little change. In spite of rebuilding the whole application, we must build only that code part which is actually changed and also that code that depends on that change. So with the help of advanced local, distributed caching, optimized dependency analysis and parallel execution, we can achieve fast and also incremental builds. In Angular 6 we will start having this compiler support.

7. Component Dev Kit:

The component dev kit is used by the Angular Material library, which provides more than 30+ UI components.

CDK helps us to build our own library of UI components using Angular Material. It helps us to make Responsive Web Design layouts and eliminate the need of libraries like Flex Layout or learning CSS Grid. CDK was released in December 2017 but the Angular Team keeps improving it.

8. Service Worker:

Service worker runs in the web browser. Angular 5 first introduced the service worker. In Angular 6, it comes with some bug fixing as well as some new functionalities. Service worker also manages to cache for an application. But sometimes when we are deploying the latest version of the application we may need to deactivate or uninstall the existing service worker. At this point, there is no way to deactivate service worker. To fulfill this need, this new release contains new script file safety-worker.js which will be part of the production bundle which in turn helps us to unregister existing service worker. Angular 6 now also gives support to the configuration of navigation of URLs within the Service Workers.

9. Router:

Sometimes the router hits a race condition while a route is being instantiated and a new navigation request arrives. Already this issue has been solved in Angular 6 and it has added navigation source and restoredstate to navigationstart, navigationstart there is no way to know if navigations were triggered imperatively or via the location change.

10. Angular CLI:

As part of this release, a new version has updated the core framework packages (@angular/core, @angular/common, and @angular/compiler, etc.).

ng update is the new CLI command that will analyze your package.json and will give you a recommendation regarding the updating of the packages for your application. ng update will help you to adopt the right version of dependencies and keep our dependencies in sync. If one of our dependencies provides an ngupdateschematic, they will automatically make changes to the code to keep our code updated.

new ng add helps you to download new dependencies/packages and run an installation script which can update our project with configuration changes. It has added new capabilities to the application.

Once you run ng g @angular/material to add material to your existing application you will also be able to generate three new starter templates like :

i) Material Sidenav:

This will generate a starter component with sidebar navigation.

ng generate @angular/material:material-nav –name=my-nav

ii) Material Dashboard:

This will generate a starter component containing a dynamic grid list of cards.

ng generate @angular/material:material-dashboard –name=my-dashboard

iii) Material Data Table

This will generate a data table component that is pre-configured for sorting and pagination.

ng generate @angular/material:material-table –name=my-table

11. Registering Providers and Tree Shaking in Angular 6:

In Angular 6, you can write your service inside the supervisor itself by putting the providedIn:root property within the “@injectable” decorator. Previously, in order to use a service, we had to register it with the injector in a particular mode, we would import it and add it to the provider’s array but now we can do it in service itself. We can do that by using the providedIn property in the injectable decorator. ProvidedIn module is responsible for creating an instance of the services. By this way, the entire application can use the services. To make your app smaller Angular team moved from modules referencing services to services referencing modules. This only allows bundle services into your code base in modules where they are injected.

12. Animations Performance Improvements:

Implementation of animation has been updated in which we do not need the web animations polyfill. By removing polyfill from your application, we can save approximately 47kb of the bundle size. This improves the performance of animation in Safari.

13. ElementRef<T>:

Previously when we wanted to create the reference of an element in the template, we can use @ViewChild or @ViewChildren or inject the host using ElementRef directly. But in previous versions of Angular,  ElementRef had its nativeElement property typed as any. Now in Angular 6, if we wish to use ElementRef more strictly, then we can use that.

14. ngModelChange and Good Bye Template Element:

In the previous version of angular, ngModelChange event was emitted before the said form control update. In the previous version, if we have an event handler for the ngModelChange event that checked the value through the control, the old value will be returned instead of the changed value. Now, ngModelChange has omitted the value after the value is updated in the form control.

The <template> element was depreciated one year ago when Angular 4 was launched. Now it’s time to say goodbye to the <template> because it is now removed from the Angular 6 framework. In spite of using <template>, we need to use <ng-tempalate>.

15. i18n:

In Angular 6 one of the major change is localization or i18n. New i18n is the upcoming possibility to have “runtime i18n”, without having to build the application once per locale. This is not available yet (there are just prototypes for now), and it will need Ivy renderer to work. So we will have to wait a few weeks/months before using it.

Already another i18n related change has landed, and this is immediately available. The currency pipe was improved a lot. It will not round every currency with 2 digits anymore but will round the currency to the most appropriate digit number( that can be 3 like for the Arabic Dinar or 0 like for the Chilean Pesos).

If you want to do that programmatically then you can retrieve this value by using the new i18n function getNumberOfCurrencyDigits.

There are other formatting functions like formatDate, formatCurrency, formatPercent, and formatNumber. This is pretty handy when it comes to applying the same transformation than what the pipes do, but from within your Typescript code.

Thank you for reading. This is it. Hope it helps.