{"id":3576,"date":"2018-05-09T18:44:46","date_gmt":"2018-05-09T13:14:46","guid":{"rendered":"https:\/\/code4developers.com\/?p=3576"},"modified":"2018-05-24T19:37:58","modified_gmt":"2018-05-24T14:07:58","slug":"angular-6-features","status":"publish","type":"post","link":"https:\/\/code4developers.com\/angular-6-features\/","title":{"rendered":"Angular 6 Features"},"content":{"rendered":"<p>On 4<sup>th<\/sup> May 2018 angular team announced new version of Angular i.e., Angular V6. In this major release they are not much focusing on Framework but on toolchain. They have tried to unify the framework, CLI, and Material more. In this article we will talk about some of the major features Angular team have come up with Angular 6.<\/p>\n<p><!--more--><\/p>\n<h3 id=\"framework-features\">Framework features<\/h3>\n<ul>\n<li>@angular\/core is now depends on\n<ul>\n<li>TypeScript 2.7<\/li>\n<li>RxJS 6.0.0<\/li>\n<li>tslib 1.9.0<\/li>\n<\/ul>\n<\/li>\n<li>@angular\/platform-server now depends on Domino 2.0<\/li>\n<li>The &lt;template&gt; tag was deprecated in Angular v4 to avoid crashes (i.e. when using Web Components). Now we can use same it with &lt;ng-template&gt;<\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\">Before it was like<\/p>\n<p style=\"padding-left: 60px;\"><span class=\"lang:default decode:true crayon-inline\">&lt;template&gt;some template content&lt;\/template&gt;<\/span><\/p>\n<p style=\"padding-left: 60px;\">After:<\/p>\n<p style=\"padding-left: 60px;\"><span class=\"lang:js decode:true crayon-inline\">&lt;ng-template&gt;some template content&lt;\/ng-template&gt;<\/span><\/p>\n<ul>\n<li>ngModelChange is now emitted after the value\/validity is updated on its control.<\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\">Previously, ngModelChange was emitted before its underlying control was updated. This was fine if you passed through the value directly through the $event keyword, e.g.<\/p>\n<pre class=\"lang:js decode:true\">&lt;input [(ngModel)]=\"name\" (ngModelChange)=\"onChange($event)\"&gt; \r\n onChange(value) { \r\n  console.log(value); \/\/ would log updated value \r\n}<\/pre>\n<p style=\"padding-left: 60px;\">However, if you had a handler for the ngModelChange event that checked the value through the control, you would get the old value rather than the updated value. e.g:<\/p>\n<pre class=\"lang:js decode:true\">&lt;input #modelDir=\"ngModel\" [(ngModel)]=\"name\" (ngModelChange)=\"onChange(modelDir)\"&gt; \r\nonChange(ngModel: NgModel){ \r\n  console.log(ngModel.value); \/\/ would log old value, not updated value \r\n}<\/pre>\n<p style=\"padding-left: 60px;\">Now the value and validity will be updated before the ngModelChange event is emitted, so the same setup will log the updated value.<\/p>\n<pre class=\"lang:default decode:true \" style=\"padding-left: 30px;\">onChange(ngModel: NgModel) { \r\n  console.log(ngModel.value);\/\/ will log updated value \r\n}<\/pre>\n<h3 id=\"\"><\/h3>\n<h3 id=\"cli-features\">CLI Features<\/h3>\n<ul>\n<li><b>ng eject<\/b><\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\">The &#8216;eject&#8217; command has been temporarily disabled, as it is not yet compatible with the new angular.json format. The new configuration format provides further flexibility to modify the configuration of your workspace without ejecting. Ejection will be re-enabled in a future release of the CLI.<\/p>\n<p style=\"padding-left: 60px;\">In the meantime, you can eject with 1.7.4, then update your project and keep using webpack to build<\/p>\n<ul>\n<li><b>ng update<\/b><\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\">A new Angular CLI command to help simplify keeping your projects up to date with the latest versions. Packages can define logic which will be applied to your projects to ensure usage of latest features as well as making changes to reduce or eliminate the impact related to breaking changes.<\/p>\n<ul>\n<li><b>ng add<\/b><\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\">A new Angular CLI command provides package authors the ability to include dynamic setup instructions as part of the installation procedures. When a user installs a package via <code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">ng add<\/code> and that package includes a schematic named &#8220;ng-add&#8221; logic will run to set up that package within your project.<\/p>\n<p style=\"padding-left: 60px;\">For package owners:<br \/>\n<code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">ng-add<\/code> is powered by a single schematic named &#8220;ng-add&#8221; within your package&#8217;s schematics collection. Options will be passed through to your schematic when running the schematic to allow for further configuration options.<\/p>\n<ul>\n<li><b>PWA Support<\/b><\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\">Adding the configuration and assets to configure your applications as PWAs can be confusing and time consuming, to simplify the process you can now run <code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">ng add @angular\/pwa --project [project-name]<\/code> to configure the supplied project as a progressive web application.<\/p>\n<h3 id=\"material-6-0-features\">Material 6.0 Features<\/h3>\n<ul>\n<li>With the Angular CLI v6.0+, you can use the <code>ng update<\/code> command to automatically migrate to the new APIs\n<pre class=\"\"><code>ng update @angular\/material<\/code><\/pre>\n<\/li>\n<li>A number of APIs that were deprecated during beta have been removed<\/li>\n<\/ul>\n<h4 id=\"summary\">Summary<\/h4>\n<p>This is not full list of features but the most important one. If you are interested to read all the change log visit these links <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/github.com\/angular\/angular\/blob\/master\/CHANGELOG.md\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/github.com\/angular\/angular\/blob\/master\/CHANGELOG.md\" data->framework<\/a>, <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/github.com\/angular\/material2\/blob\/master\/CHANGELOG.md\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/github.com\/angular\/material2\/blob\/master\/CHANGELOG.md\" data->material+cdk<\/a>, <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/github.com\/angular\/angular-cli\/releases\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/github.com\/angular\/angular-cli\/releases\" data->cli<\/a>.<\/p>\n<p>Want to perform CRUD operations using Angular 6 then try out this <a href=\"https:\/\/code4developers.com\/angular-6-crud-part-1-project-setup-routing-service\/\">article<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>On 4th May 2018 angular team announced new version of Angular i.e., Angular V6. In this major release they are not much focusing on Framework but on toolchain. They have&hellip;<\/p>\n","protected":false},"author":4,"featured_media":2649,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[29,179],"powerkit_post_featured":[],"class_list":{"0":"post-3576","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"tag-angular","9":"tag-angular-6"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-VG","jetpack-related-posts":[{"id":2613,"url":"https:\/\/code4developers.com\/ui-routing-basics\/","url_meta":{"origin":3576,"position":0},"title":"UI-Routing &#8211; Basics","author":"Arif Khoja","date":"June 17, 2017","format":false,"excerpt":"Introduction In the present scenario, AngularJS is the most trusted framework for the creation of Single Page Applications (SPA), and UI-Routing is one of the most important aspects. We want to keep our navigation feeling like a normal site and want to load the pages without refreshing the Browser. For\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3007,"url":"https:\/\/code4developers.com\/angular-4-components\/","url_meta":{"origin":3576,"position":1},"title":"Angular 4 Components","author":"Nisarg Dave","date":"July 28, 2017","format":false,"excerpt":"In this article, we will discuss about what is a component in Angular 4? In Angular 4 everything is component. Rather we can say components are the basic building blocks of Angular 4 applications. Component based web development is the future of web development.\u00a0The advantage of the component-based approach is\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3934,"url":"https:\/\/code4developers.com\/angular-version-7-released\/","url_meta":{"origin":3576,"position":2},"title":"Angular Version 7 Released","author":"Yatendrasinh Joddha","date":"October 19, 2018","format":false,"excerpt":"Finally, the Angular version 7 (Angular v7) is out with some awesome features. Thanks to Angular team for all the efforts, in this major release angular team is spanning the entire platform, with the core framework, Angular Material, and the CLI with corresponding key versions. This release covers new landscapes\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Virtual Scrolling","src":"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/1200\/1%2ACQKUmJrBs-523I4GOiEUaA.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/1200\/1%2ACQKUmJrBs-523I4GOiEUaA.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/1200\/1%2ACQKUmJrBs-523I4GOiEUaA.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":14480,"url":"https:\/\/code4developers.com\/angular-custom-elements\/","url_meta":{"origin":3576,"position":3},"title":"Angular Custom Elements: Creating Reusable Components with Angular","author":"Yatendrasinh Joddha","date":"April 19, 2023","format":false,"excerpt":"Angular Custom Elements allow you to create reusable components that can be used in non-Angular applications. Custom Elements are a powerful feature that can help you share code across multiple projects and platforms. In this article, we'll take a closer look at Angular Custom Elements and show you how to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Angular Custom Elements","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":9279,"url":"https:\/\/code4developers.com\/what-is-new-in-angular-10\/","url_meta":{"origin":3576,"position":4},"title":"What is new in Angular 10?","author":"Yatendrasinh Joddha","date":"June 25, 2020","format":false,"excerpt":"Today Angular Teams has announced Version 10.0.0 of Angular! This release is smaller than typical, but it covers the entire platform, including the framework, Angular Material, and the CLI. What's new here? Optional Stricter Settings ng new --strict Enabling this flag initializes your new project with a few new settings\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/miro.medium.com\/max\/60\/0*ruU5G-8_hqEp3UBY?q=20","width":350,"height":200},"classes":[]},{"id":2625,"url":"https:\/\/code4developers.com\/angular-4-project-structure\/","url_meta":{"origin":3576,"position":5},"title":"Angular 4 Project Structure","author":"Nisarg Dave","date":"June 18, 2017","format":false,"excerpt":"Introduction In previous article we learned about Angular 4 Installation. You can find that article on https:\/\/code4developers.com\/angular-4-installations\/\u00a0. This article describes the project structure of Angular 4 application which Angular CLI created for us. I have already created ANGULAR4DEMO project in my previous article, so we will use that project to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-1.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3576"}],"version-history":[{"count":15,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3576\/revisions"}],"predecessor-version":[{"id":3601,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3576\/revisions\/3601"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2649"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3576"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}