Angular 6 & Its Features
Published: 2023-09-05 10:49:48

The 6.0.0 released few months back. This is a release focused less on the fundamental framework and more on the toolchain and making it much easier to move with angular in future. So I am going to highlight it’s new feature released with this version. As we all know that the popularity of javascript frameworks are increasing day by day and Angular is one of the most popular framework these days for building [Angular JS sample web applications](https://jsonworld.com/blog/angular-6-its-features) as well as mobile applications.

Let’s have a brief look on the Angular 6 features:

### 1. Angular Elements

Angular is one of the best option for creating Single Page Application. Creating a widget which can be added into an existing web page was not a easy task earlier. The Angular package will now allow you to create an angular component  and publish is as an independent web component, Which can be used in any web page. Developers of app will be able to use components built in Angular in the pages of an app. This is one of best feature added in this version which provides flexibility to switch the Angular framework in web app development.

###  2. CDK Components(Component Dev Kits)

One of the biggest addition in the version 6 is the new tree component for displaying hierarchical data. CDK  allows Angular developers to build their own library for UI components. It’s also supporting responsive web designs layouts removing the need of libraries like Flax layout.

### 3. Angular Material Starter Components

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7yx2aevqiwbewfg08w7.gif)

### 4. Ng update

Ng update <package> is a latest CLI command that analyzes our package.json and uses its information of angular to recommend updates to our application.

Ng update not only helps us to adopt the right version of dependencies, and keep the dependencies in sync, but also third parties can also provide update scripts  using [schematics](https://jsonworld.com/blog/angular-6-its-features). If our dependencies provides an update schematics, it can automatically update our code when it need to make changes.


###  5. Ng  add
Another new CLI command ng add<package> adds new capabilities to our angular applicaiton easy. Ng add will  use our package manager to download new dependencies.


some of the following on your fresh ng new application

**ng add @angular/pwa** — Turn your application into a PWA by adding an app manifest and service worker
**ng add @ng-bootstrap/schematics** — Add [ng-bootstrap](https://jsonworld.com/blog/angular-6-its-features) to your application
**ng add @angular/material** — Install and setup Angular Material and theming and register new starter components into ng generate
**ng add @clr/angular** — Install and setup Clarity from VMWare
**ng add @angular/elements** — Add the needed document-register-element.js polyfill and dependencies for Angular Elements

### 6. Material sidenav
We can now generate a starter component including a toolbar with app name and the side navigation. The component is responsive based on breakpoints.

 

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

This will create this starter component:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yny1djekryutkejyf264.png)

### 7. Material Dashboard

Also we 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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ieazs3bc8k5851gguowu.png)

### 8. Material Data Table

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

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

This will create this starter component:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvjiyb78qil3hf31xif2.png)

### 9 . CLI Workspaces
CLI v6 has now support for workspaces contaning multiple projects such as multiple applications. CLI projects will now use angular.json instead of .angular-cli.json for build and project configuration.

### 10. Library Support

One of the most requested features for our CLI has been support for creating and building libraries.

ng generate library <name>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wc8btubq108q3qoswr9.gif)

This command will create a library project within your CLI workspace, and configure it for testing and for building.

### 11.Tree Shanking

To make our application smaller, Angular has moved from module refrencing services to services referencing modules. This allows us to only bundle services into our code.

### 12. Rxjs v6

Angular has been update to v6 of Rxjs. Rxjs is an independent project that released v6 some time ago. Rxjx brings it major changes, along with a backend compatibility  package rxjs-compat that will keep our application working. It has been rearranged to make it more tree-shakable, ensuring that only the pieces of RxJS that you use are included in our production bundles.

 

That’s all for now. Thank you for reading and I hope this article will be very helpful to understand latest features of angular6.

Let me know your thoughts over the email **demo.jsonworld@gmail.com.** I would love to hear them and If you like this article, share with your friends.

This article is originally posted over [jsonworld](jsonworld.com)