Know Angular 6 New Features Here {2018}

Angular 6 is out now, lets understand the new features of Angular 6 here...

ng update: A new CLI command that will update your project dependencies to their latest versions.
ng add: Another new CLI command that will make adding new capabilities to your project easier.
Angular Elements: This is a new feature that allows us to compile Angular components to native web components which we can use in our Angular app.
<template> element is deprecated: You can't use <template> anymore inside of your component templates. You need to use <ng-template> instead.
Angular CLI now has the support for creating and building libraries. To create a library project within your CLI workspace run the following command:
ng generate library <name>

e.g. :- ng generate library demo-lib
Angular Material Starter Components: If you run "ng add @angular/material" to add material to an existing application, you will also be able to generate 3 new starter component.

Material Sideman
A starter component including a toolbar with the app name and the side navigation.

Material Dashboard
A starter dashboard component containing a dynamic grid list of cards.

Material Data Table
A starter data table component that is pre-configured with a data source for sorting and pagination.

Angular CLI now has support for workspaces containing multiple projects, such as multiple applications and/or libraries.
The ".angular-cli.json" file has been deprecated. Angular projects will now use "angular.json" instead of ".angular-cli.json" for build and project configuration.
Angular 6 will also allow us to use RxJS V6 with our application.

Tree Shakable Providers: - Angular 6.0 allows us to bundle services into the code base in modules where they are injected. This will help us to make our application smaller.

e.g. – Earlier, we used to reference our services as below:
// In app.module.ts 

•   
• @NgModule({  
•   ...  
•   providers: [MyService]  
• })  
• export class AppModule {}  
•   
• // In myservice.ts   
•   
• import { Injectable } from '@angular/core';  
•   
• @Injectable()  
• export class MyService {  
•   constructor() { }  
• }  

This approach will still work but Angular 6.0 provides a new and easier alternative to this. We no longer need to add references in our NgModule. We can inject the reference directly into the service. Therefore, we can use the service as below:

• // In myservice.ts  
•   
• import { Injectable } from '@angular/core';  
•   
• @Injectable({  
•   providedIn: 'root',  
• })  
• export class MyService {  
•   constructor() { }  
• }   

That is all about the features/improvements in the latest release of Angular. Let us move to create our first application using Angular 6.0.