Read-On to Know About the Latest Technological Developments

Blog

Angular4 Update

Angular 4: The Latest Updates for Developers

Angular 4 is out and there has been a couple of updates to this version. Roughly after 6 months of Angular 2 release, Angular 4 has come out with a number of updates. With all these updates, Angular can be used with a number of different languages like Dart, ECMAScript5, TypeScript and so on. Angular is however, not known as Angular 4; it is only referred to with its first name in the market with the developers. Some website developers are wondering as to why Angular 4 and not 3? There is a reason behind it. The reason is that all the developments have been done till version 3 though the name remained unchanged. So, the only logical development will be version 4 now.

The New Additions in Angular V4

The following are the new additions to Angular V4:

  • Router ParamMap- From this update, request for a route can be made by assigning a queryparameter to a route. Until now, route parameters were stored in a simple key-value object structure, thus being accessible by using standard Javascript syntax (parameterObjekt[‘parameter-name’]. This addition will bring an advantage for type security.

*image source:jaxenter.com


  • Animations- The animation functions until now were provided as part of @angular/core module, meaning that these parts of the code were always included in applications, even if they were not used in application without animations. This function has now been put into its own package to avoid creating bundles with redundant large sizes. This is basically an updated version of a feature and not exactly a new feature.
  • Ngif: Allowed to use with “else”- Conditional rendering was commonly used to display information depending on some condition. This is generally done by *ngif. In case a condition is not met, the corresponding element and child elements will not be added to the DOM-tree. This generates nasty consequences in terms of readability and maintainability of the code. However, with the update, this problem has been solved by adding a new “else”. Angular now uses a separately referenced template fragment, which will be used in the place of *ngif. The illustration below shows a lot:


*image source:jaxenter.com

From here, we can see that the functionality of *ngif in the field of reactive programming just got improved when interacting with the async-pipe. The new updated syntax also helps in adding a local template variable to the result of the if-clause.

  • Changeable Components- The new and updated *ngComponentOutlet-Directive enables dynamic components in a declarative way. This has cut down the way old programming used to work; considerably with a lot of detailed work. The following illustration shows how it has changed with *ngComponentOutlet-Directive.

*image source:jaxenter.com

In this illustration, either FirstTimeVisitorComponent or FrequentVisitorComponent will be displayed as a greeting to the visitors, depending on whether they are accessing the page for the first time or for the second time.

  • TypeScript- Majority of TypeScript versions have been updated in Angular V4 except for Type Checks which could not be incorporated due to some incomparabilities.
  • Angular Universal- This will help in rendering Angular applications outside of the browser. For example, it can be applied directly on the web server. With this websites will be better optimized for search engines without using JavaScript. WebWorker Threads are also sued to render content outside the GUI Thread. This rendered content will be simply added to the DOM tree later on. Angular Universal could be used of various programming languages through node-Runtime. Some changes will be New Pipe Title Case; Automatic Assignment of nonvalidation; templates get source maps; Flat ESM/FESM; new engine for unmatched speed.

Some adjustments are being made for using Angular 4. They are:

  • Dependencies Update- Angular-Modules versions can be updated via npm:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next –save

  • Altered Lifecycle Events- Classes need to use interfaces to implement Lifecycle
  •  Template Tags Renamed-Until now, “template” was used as a Tag or Attribute for templates. This has been marked as obsolete now.
  •   Access to Renderer- Access is currently provided by RendererFactory2.
This is not the end. Angular 5 is slated to be released soon with even more updates which will definitely help even more developers with their work. It will release with bugfixes. This also indicates that the Angualr community is always listening. 



Comments (0)

Leave a comment






The answer is