{"id":377,"date":"2018-10-04T12:47:53","date_gmt":"2018-10-04T12:47:53","guid":{"rendered":"http:\/\/www.ipraxa.com\/blog\/?p=377"},"modified":"2023-07-05T13:13:26","modified_gmt":"2023-07-05T13:13:26","slug":"angular-6-new-compelling-features","status":"publish","type":"post","link":"https:\/\/www.ipraxa.com\/blog\/angular-6-new-compelling-features\/","title":{"rendered":"Angular 6 – New Compelling Features You’ll Love to Use"},"content":{"rendered":"

Angular<\/a>, Google\u2019s popular JavaScript-based framework for building single-page web and mobile applications, has been creating buzz among developers ever since its first release back in September 2016. While Angular 5, the previous major version of Angular, was released by the end of 2017, the search engine giant recently launched Angular 6 – the latest and first major release of the framework in the year 2018.<\/p>\n

Unlike the previous versions of Angular, which were mainly focused on the underlying framework, Angular 6 rather focuses on the toolchain to make the framework even further smaller, faster and easier to use. Let\u2019s check out some of the new features and improvements that Angular 6 has to offer.<\/p>\n

#New CLI Commands<\/h2>\n

The Angular CLI gets two major new commands, ng update<\/strong> and ng add<\/strong>, with the release of Angular 6. Let\u2019s examine these two new commands in detail.<\/p>\n

ng update<\/h3>\n

ng update <package>\u00a0<\/span>analyzes your package.json file and recommend available updates to your Angular 6 application accordingly. For example, running the command ng update @angular\\core<\/span> will update all the packages of the Angular 6 framework as well as TypeScript and RxJS and will run any schematics available on these packages to keep your Angular 6 application up to date.<\/p>\n

\"Angular<\/p>\n

ng add<\/h3>\n

ng add <package><\/span> is another new CLI command designed to make it easier for developers to add new capabilities to their Angular 6 projects. For instance, instead of writing multiple lines of code, you can now add Angular Material to your projects with a simple command such as ng add @angular\/material<\/span>.<\/p>\n

\"Angular<\/p>\n

#Angular Elements<\/h2>\n

Starting with Angular 6, you\u2019ll be able to dynamically bootstrap Angular components and embed them as native Custom Elements into your other existing Angular 6 projects. This new features not only gives developers a golden opportunity to define new HTML elements in a framework-agnostic manner but also eliminates the requirement of manually bootstraping Angular 6 elements found in static HTML content.<\/p>\n

\"Angular<\/p>\n

#New CDK Components<\/h2>\n

CDK<\/a>, which stands for Component Dev Kit, is already a part of the Angular Material<\/a> library which offers more than 30 UI components. The main objective of CDK is to empower developers to build their very own library of custom UI components without having to re-invent the wheel.<\/p>\n

With the release of Angular 6, there are some new components that have been added to the Angular Material library:<\/p>\n

Tree<\/h3>\n

Available in both styled (mat-tree) and unstyled (cdk-tree) versions, the new tree component is best suited for displaying hierarchical data.<\/p>\n

\"Angular<\/p>\n

Badge<\/h3>\n

This component, which consists of a small circle, can be used to display a small piece of information such as unread item counts, missed item counts, etc.<\/p>\n

\"Angular<\/p>\n

Bottom-Sheet<\/h3>\n

This component is a special type of mobile-centric dialog that can be used to display a list of options for a particular action from the bottom of the viewport.<\/p>\n

\"Angular<\/p>\n

Overlay<\/h3>\n

The @angular\/cdk\/overlay<\/span> package has been updated with a new positioning logic to help developers create intelligent pop-ups that stay on the screen in all situations.<\/p>\n

#Angular Material Starter Components<\/h2>\n

With Angular 6, you\u2019ll be able to generate 3 new starter components right after you run ng add @angular\/material<\/span> to add material components to your existing Angular 6 project.<\/p>\n

\"Angular<\/p>\n

These components are:<\/p>\n

Material Sidenav<\/h3>\n

By Running the ng generate @angular\/material:material-nav –name=my-nav<\/span> command, you can generate a starter component that includes a toolbar with the app name and the side navigation.<\/p>\n

\"Angular<\/p>\n

Material Dashboard<\/h3>\n

Run ng generate @angular\/material:material-dashboard –name=my-dashboard<\/span> command to generate a starter dashboard component that contains a dynamic grid list of cards.<\/p>\n

\"Angular<\/p>\n

Material Data Table<\/h3>\n

To generate a starter data table component pre-configured with a datasource for the purpose of sorting and pagination, you can run this command ng generate @angular\/material:material-table –name=my-table<\/span>.<\/p>\n

\"Angular<\/p>\n

#CLI Workspaces<\/h2>\n

The Angular CLI now supports the creation of workspaces. Each workspace can have multiple Angular 6 projects, each project can have targets and each target can have configurations. Additionally, instead of .angular-cli.json, the Angular CLI will now use a renamed file angular.json for build and project configuration.<\/p>\n

\"Angular<\/p>\n

#Library Generation Support<\/h2>\n

Starting with Angular 6, the CLI allows developers to create and build libraries in an existing workspace. You can now easily create a library using the new ng generate library <name><\/span> CLI command.<\/p>\n

\"Angular<\/p>\n

#Tree Shakable Providers<\/h2>\n

Tree shaking is Google\u2019s build optimization attempt to ensure any unused code will not be included in the final bundle. Instead of \u2018modules referencing services\u2019, Angular 6 now uses \u2018services referencing modules\u2019 to make your applications smaller and faster.<\/p>\n

\"Library<\/p>\n

#Animations Performance Improvements<\/h2>\n

With the release of Angular 6, developers are no longer required to use the web animations polyfill. This means developers can now remove this polyfill from their Angular 6 project and save approximately 47KB of bundle size, while also increasing the performance of animations in Safari browser at the same time.<\/p>\n

#RxJS v6<\/h2>\n

Angular 6 uses version 6 of RxJS, which is the latest and updated version of the independent library. This means you can now enjoy the newest features of RxJS 6, like backwards compatibility, in your Angular 6 applications.<\/p>\n

#Other Notable Changes<\/h2>\n

Removal of < template > Tag<\/h3>\n

While the <template><\/span> element was depreciated a year ago in Angular 4, it has been removed completely from the Angular 6 framework. Consequently, you have to use a new element <ng-template><\/span> instead.<\/p>\n

\"Angular<\/p>\n

TypeScript 2.7+ Support:<\/h3>\n

To make coding easier, Angular 6 supports TypeScript 2.7 and all its subsequent versions, with features like conditional type declarations, strict class initialization, and default declarations.<\/p>\n

That\u2019s all about Angular 6! For information and guidance on upgrading your application to Angular 6, you may visit Angular Update Guide<\/a>. Feel free to contact us<\/a>\u00a0if you have any query regarding Angular website and application development<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Angular, Google\u2019s popular JavaScript-based framework for building single-page web and mobile applications, has been creating buzz among developers ever since its first release back in September 2016. While Angular 5, the previous major version of Angular, was released by the end of 2017, the search engine giant recently launched Angular 6 – the latest and <\/p>\n

Read More <\/svg><\/a><\/p>\n","protected":false},"author":4,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[40,41,42,43],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/posts\/377"}],"collection":[{"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/comments?post=377"}],"version-history":[{"count":12,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/posts\/377\/revisions"}],"predecessor-version":[{"id":2832,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/posts\/377\/revisions\/2832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/media\/395"}],"wp:attachment":[{"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/media?parent=377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/categories?post=377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/tags?post=377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}