{"id":4744,"date":"2017-04-07T14:42:46","date_gmt":"2017-04-07T14:42:46","guid":{"rendered":"https:\/\/staging.heliossolutions.co\/blog\/?p=4744"},"modified":"2019-12-03T06:05:50","modified_gmt":"2019-12-03T06:05:50","slug":"new-improved-angular-finally-angular-4","status":"publish","type":"post","link":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/","title":{"rendered":"New and Improved Angular is Finally Here: Angular 4"},"content":{"rendered":"

\"New<\/a><\/p>\n

As per the announcement by Google, Angular team finally released Angular 4 with an \u201cinvisible makeover\u201d. This is Angular team\u2019s first major release since they switched to Semantic Versioning<\/a> and the good news is that it is backwards compatible with Angular 2. This means the new version has a very gentle learning curve. Our team of Angular specialists<\/a><\/strong> is very excited as they can get started with it straightaway! Back in September when the much awaited Angular 2 had arrived, it was a total breaking change with new patterns and new APIs as the framework was a complete rewrite.<\/p>\n

Related: Angular 2.0 is Finally Ready to be Tamed!<\/a><\/strong><\/p>\n

What\u2019s Different in Angular 4?<\/h2>\n

After working hard for past 3 months, the Angular team has included some major improvements and functionalities. At the same time they have tried their best to make it easier for developers to update to this release.<\/p>\n

Enables you to cut down on fat<\/h3>\n

The new release would allow significant reduction in your production bundles by allowing you to generate less code. The team is still working on it to reflect further improvements in the months to come. Now on you can keep your apps smaller and faster! Here are some changes to facilitate this:<\/p>\n

New View Engine<\/h4>\n

Changes have been introduced under the hood to reduce the code generated by AOT compiler. As a result almost there is almost 60 percent reduction in the size of generated code. If your templates are more complex then the savings would be more. To learn more about View Engine, read the\u00a0Design Doc<\/a><\/strong>.<\/p>\n

Animation Package<\/h4>\n

As animations have their own package @angular\/platform-browser\/animations<\/span> now, there won\u2019t be any extra code in your production bundles if you are not using animations in your app. Consequently, you can easily find document and also leverage autocompletion. You can also import BrowserAnimationsModule<\/span> and add animations to your main NgModule<\/span>.<\/p>\n

Let\u2019s explore the new features!<\/h3>\n

Improved *ngIf and *ngFor<\/p>\n

The new template binding syntax now allows you to use an if\/else style syntax, and assign local variables such as when unrolling an observable.<\/p>\n

<div *ngIf=\"userList | async as users; else loading\">\r\n\r\n<user-profile *ngFor=\"let user of users; count as count\" [user]=\"user\">\r\n\r\n<\/user-profile>\r\n\r\n<div>{{count}} total users<\/div>\r\n\r\n<\/div>\r\n\r\n<ng-template #loading>Loading...<\/ng-template><\/pre>\n
Angular Universal<\/h4>\n
Universal, is now an official Angular project! Originally it was a community-driven project that allows you to do server-side rendering. The internal and external work from Universal team over the last few months is now reflected in the new Angular. Most of the Universal code can be now found in @angular\/platform-server<\/span>. You can learn more about it at the new\u00a0renderModuleFactory<\/a> method.<\/p>\n
TypeScript 2.1 and 2.2 compatibility<\/h4>\n
Now you can get better type checking all through your application as the new release has been updated to a more recent version of TypeScript. This will also improve the speed of ngc<\/span>.<\/p>\n
Source Maps will be generated<\/h4>\n
In case of errors in any of your template, source maps will be generated. This will help you to provide a meaningful context with regards to the original template. Hence, you can easily rectify your errors.<\/p>\n
Conclusion<\/h2>\n
As per the Angular team, you won\u2019t find it hard to adapt to this new version but we believe you all would have unique experiences playing with this framework. We would love to know how you felt while you explored the new features in this fresh new Angular.\u00a0Let\u2019s start a conversation<\/a><\/strong>!<\/p>\n","protected":false},"excerpt":{"rendered":"
As per the announcement by Google, Angular team finally released Angular 4 with an \u201cinvisible makeover\u201d. This is Angular team\u2019s\u2026<\/p>\n","protected":false},"author":3,"featured_media":4745,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[864],"tags":[622,624,623],"class_list":["post-4744","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uxui","tag-angularjs-experts","tag-angularjs-specialist","tag-angularjs-web-development-company"],"acf":[],"yoast_head":"\nNew and Improved Angular is Finally Here: Angular 4 - Helios Blog<\/title>\n<meta name=\"description\" content=\"Angular 4 is out! Now you can develop rich applications much faster with lesser code. Get in touch with Outsourcing Angular Web Development Agency now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New and Improved Angular is Finally Here: Angular 4 - Helios Blog\" \/>\n<meta property=\"og:description\" content=\"Angular 4 is out! Now you can develop rich applications much faster with lesser code. Get in touch with Outsourcing Angular Web Development Agency now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/\" \/>\n<meta property=\"og:site_name\" content=\"Helios Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-07T14:42:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-03T06:05:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"helios\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"helios\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/\"},\"author\":{\"name\":\"helios\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/ce1ab8197db1f84358e99b203e8f6b38\"},\"headline\":\"New and Improved Angular is Finally Here: Angular 4\",\"datePublished\":\"2017-04-07T14:42:46+00:00\",\"dateModified\":\"2019-12-03T06:05:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/\"},\"wordCount\":553,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg\",\"keywords\":[\"AngularJS Experts\",\"AngularJS Specialist\",\"AngularJS Web Development Company\"],\"articleSection\":[\"UX\/UI\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/\",\"name\":\"New and Improved Angular is Finally Here: Angular 4 - Helios Blog\",\"isPartOf\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg\",\"datePublished\":\"2017-04-07T14:42:46+00:00\",\"dateModified\":\"2019-12-03T06:05:50+00:00\",\"description\":\"Angular 4 is out! Now you can develop rich applications much faster with lesser code. Get in touch with Outsourcing Angular Web Development Agency now.\",\"breadcrumb\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#primaryimage\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg\",\"contentUrl\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg\",\"width\":800,\"height\":350,\"caption\":\"New and Improved Angular is Finally Here: Angular 4\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/staging.heliossolutions.co\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New and Improved Angular is Finally Here: Angular 4\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#website\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/\",\"name\":\"Helios Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/staging.heliossolutions.co\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#organization\",\"name\":\"Helios\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2023\/01\/Helios-blue-website.png\",\"contentUrl\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2023\/01\/Helios-blue-website.png\",\"width\":250,\"height\":47,\"caption\":\"Helios\"},\"image\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/ce1ab8197db1f84358e99b203e8f6b38\",\"name\":\"helios\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/acb724e9e4c2d0799bde8878da07c0aa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/acb724e9e4c2d0799bde8878da07c0aa?s=96&d=mm&r=g\",\"caption\":\"helios\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New and Improved Angular is Finally Here: Angular 4 - Helios Blog","description":"Angular 4 is out! Now you can develop rich applications much faster with lesser code. Get in touch with Outsourcing Angular Web Development Agency now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/","og_locale":"en_US","og_type":"article","og_title":"New and Improved Angular is Finally Here: Angular 4 - Helios Blog","og_description":"Angular 4 is out! Now you can develop rich applications much faster with lesser code. Get in touch with Outsourcing Angular Web Development Agency now.","og_url":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/","og_site_name":"Helios Blog","article_published_time":"2017-04-07T14:42:46+00:00","article_modified_time":"2019-12-03T06:05:50+00:00","og_image":[{"width":800,"height":350,"url":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg","type":"image\/jpeg"}],"author":"helios","twitter_card":"summary_large_image","twitter_misc":{"Written by":"helios","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#article","isPartOf":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/"},"author":{"name":"helios","@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/ce1ab8197db1f84358e99b203e8f6b38"},"headline":"New and Improved Angular is Finally Here: Angular 4","datePublished":"2017-04-07T14:42:46+00:00","dateModified":"2019-12-03T06:05:50+00:00","mainEntityOfPage":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/"},"wordCount":553,"commentCount":0,"publisher":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/#organization"},"image":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg","keywords":["AngularJS Experts","AngularJS Specialist","AngularJS Web Development Company"],"articleSection":["UX\/UI"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/","url":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/","name":"New and Improved Angular is Finally Here: Angular 4 - Helios Blog","isPartOf":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#primaryimage"},"image":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg","datePublished":"2017-04-07T14:42:46+00:00","dateModified":"2019-12-03T06:05:50+00:00","description":"Angular 4 is out! Now you can develop rich applications much faster with lesser code. Get in touch with Outsourcing Angular Web Development Agency now.","breadcrumb":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#primaryimage","url":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg","contentUrl":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4.jpg","width":800,"height":350,"caption":"New and Improved Angular is Finally Here: Angular 4"},{"@type":"BreadcrumbList","@id":"https:\/\/staging.heliossolutions.co\/blog\/new-improved-angular-finally-angular-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging.heliossolutions.co\/blog\/"},{"@type":"ListItem","position":2,"name":"New and Improved Angular is Finally Here: Angular 4"}]},{"@type":"WebSite","@id":"https:\/\/staging.heliossolutions.co\/blog\/#website","url":"https:\/\/staging.heliossolutions.co\/blog\/","name":"Helios Blog","description":"","publisher":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging.heliossolutions.co\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/staging.heliossolutions.co\/blog\/#organization","name":"Helios","url":"https:\/\/staging.heliossolutions.co\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2023\/01\/Helios-blue-website.png","contentUrl":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2023\/01\/Helios-blue-website.png","width":250,"height":47,"caption":"Helios"},"image":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/ce1ab8197db1f84358e99b203e8f6b38","name":"helios","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/acb724e9e4c2d0799bde8878da07c0aa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/acb724e9e4c2d0799bde8878da07c0aa?s=96&d=mm&r=g","caption":"helios"}}]}},"feat_image_thumb":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4-550x250.jpg","mainsite_thumb":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/04\/A-New-Improved-Angular-is-Finally-Here-Angular-4-150x170.jpg","alt_text":"New and Improved Angular is Finally Here: Angular 4","_links":{"self":[{"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/posts\/4744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/comments?post=4744"}],"version-history":[{"count":0,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/posts\/4744\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/media\/4745"}],"wp:attachment":[{"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/media?parent=4744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/categories?post=4744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/tags?post=4744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}