Angular 6, was just released with many of new features and many changes in terms of tooling. This new tooling comes with great facility to upgrading & adding new libraries. I will walk you through all new feature & upgrade guide how to move from Angular 6.
New Features & upgrades
Below you’ll find a summary of major new features & upgrades.
The Angular CLI
Angular get us two major command in this release: ng add & ng update
The new ng add command allow us add an configure new libraries into project with simple single command. For example, to install and configure Angular Material require few steps to follow, but now it can all be done via single command:
$ ng add @angular/material
So basically, it add Angular Material in package.json and configure your project so you can directly use & run it in your project.
ng add will use your package manager to download required dependencies and will update configuration of your project with additional dependencies using installation script(thanks to schematics).
Same like ng add, the new ng update allow you to update 3rd party libraries to your Angular project.Many 3rd party libraries are hook up with this new command.again this also work with package manager to download needed dependencies and update package.json and update your project configuration to directly run.For example:
$ ng update @angular/core
This command update Angular project framework packages as well RxJS and Typescript and all available schematic to keep your project up to date.
This feature is first time introduce with Angular 6.0 to allowing you to bootstrap Angular Elements with Angular application custom components. angular.io is using this for content management system to allow dynamic bootstrapping of capabilities via embedded HTML.
Angular Material + CDK Components
Angular 6 is release with
new tree component for displaying hierarchical data very first time. CDK contain bunch of services,directives,components,classes,modules and many more to make developers lives easy. As in first release they included feature of text directionality,dynamic component instantiation,accessibility,platform detection.To run below command:
$ ng add @angular/material
After adding Angular material into your project you can also able to generate 3 starter component like below.
To add Material Dashboard you can run:
$ ng generate @angular/material:material-dashboard --name=my-dashboard
To add Material Sidebar you can run:
$ ng generate @angular/material:material-nav --name=my-navbar
To add Material Datatable you can run:
$ ng generate @angular/material:material-table --name=my-datatable
To upgrade you can visit https://update.angular.io for guidance and information.
To update normally you have to follow 3 steps.
- Update @angular/cli
- Update your Angular framework packages
- Update other dependencies
If you face any difficulties while upgrading you can comment below.