Angular 6 is just released!

The 6.0.0 release of Angular was published before the last week. This is a major release focused less on the underlying framework, and more on the toolchain and on making it easier to move quickly with Angular in the future.

As a part of this release, we are synchronizing the major versions going forward for the framework packages (@angular/core, @angular/common, @angular/compiler, etc), the Angular CLI, and Angular Material + CDK. All are releasing as 6.0.0 today. We made this change to clarify cross compatibility. The minor and patch releases for these projects will be issued based on the project’s needs.

See the full list of changes in our changelogs: framework, material+cdk, cli.

ng update

ng update <package> is a new CLI command that analyzes your package.json and uses its knowledge of Angular to recommend updates to your application.

Not only will ng update help you adopt the right version of dependencies, and keep your dependencies in sync, but 3rd parties can provide update scripts using schematics. If one of your dependencies provides an ng update schematic, they can automatically update your code when they need to make breaking changes!

ng update will not replace your package manager, but uses npm or yarn under the hood to manage dependencies. In addition to updating dependencies and peer dependencies, ng update will apply needed transforms to your project.

Angular Material + CDK Components

The biggest addition is the new tree component for displaying hierarchical data. Following patterns from the data-table component, the CDK houses the core tree directives, with Angular Material offering the same experience with Material Design styles on top. We recently gave a talk about the component, so check that out for more information (video, slides). These new tree components come in both styled (Material’s mat-tree) and unstyled versions (CDK’s cdk-tree).

Alongside the tree, we also have new 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.

The @angular/cdk/overlay package is one of the most powerful pieces of infrastructure in the CDK today. With the release of v6, this package now includes new positioning logic that helps make pop-ups that intelligently remain on-screen in all situations.

Angular Material Starter Components

Once you have run ng add @angular/material to add material to an existing application, you will also be able to generate 3 new starter components.

Material Sidenav

You can now generate a starter component including a toolbar with the app name and the side navigation. This component is responsive based on breakpoints.

Run:

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

This will create this starter component:

Material Dashboard

You can now generate a starter dashboard component containing a dynamic grid list of cards.

Run:

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

This will create this starter component:

Material Data Table

You can generate a starter data table component that is pre-configured with a datasource for sorting and pagination.

Run:

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

This will create this starter component:

Tree Shakable Providers

To make your applications smaller, we’ve moved from modules referencing services to services referencing modules. This allows us to only bundle services into your code base in modules where they are injected.

Before

@NgModule({
...
providers: [MyService]
})
export class AppModule {}

File: app.module.ts

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
constructor() { }
}

File: my-service.ts

After

No references are needed in our NgModule.

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})
export class MyService {
constructor() { }
}

For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.