Angular 7 Framework
Angular has been very popular with developers in the last few years. Angular can be classified as one of the most popular frameworks for web application development. With the recent release of Angular 7, it has given even more features to web developers, such as the core framework, Angular Material, CLI with synchronized major versions, along with toolchain, and has enabled several major partner launches. We will try to highlight some of its new features announced by the Angular Team below. Angular 7 has also focused on the Ivy project, rewriting the Angular compiler and runtime code to make it smaller, better, faster and more leaner.
Top New Angular 7 Features
Angular 7 beta was released on 2nd August 2018.
CLI Prompts:
Angular CLI has updated to v7.0.2 and added some features, for example it now will prompt users while typing common commands like ng-add or ng-new, @angular/material to help you discover built-in features like routing or SCSS support. With Angular 7, while creating new projects it takes advantage of Bundle Budgets in CLI.
Application Performance: Angular team discovered the blemish that Angular developers were including the reflect-metadata polyfill in production, which is only needed in development. In order to fix this, part of the update to v7 will automatically remove it from your polyfills.ts file, and then include it as a build step when building your application in JIT mode. Just note removing this polyfill from production builds by default. To speed up the performance new applications will warn when the initial bundle is more than 2MB and will error at 5MB which user can modify it in angular.json file. These budgets align with warnings that can be shown to users taking advantage of Chrome’s Data Saver features.
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
Angular Material & the CDK (Component Dev KIT) Angular 7 features visual improvements in the Material Design which received a major update in 2018. Included is refresh as well as virtual scrolling, for dynamically loading and unloading parts of the DOM to build high-performing, large lists of data. Also, applications can be fitted with a drag-and-drop capability by importing the DragDropModule or the ScrollingModule.
- Virtual Scrolling – the scrolling package <cdk-virtual-scroll-viewport> provides helpers for directives that react to scroll events. Virtual Scrolling enables loading and unloading elements from the DOM based on the visible parts. It enables a performance way to simulate all items which are rendered by making the height of the container element the same as the height of a total number of elements to be rendered. Then only rendering the items in view makes very fast experiences for users with extensively large scrollable lists.The scrolling package <cdk-virtual-scroll-viewport> provides helpers for directives that react to scroll events. Virtual Scrolling enables loading and unloading elements from the DOM based on the visible parts. It enables a high performance way to simulate all items being rendered by making the height of the container element the same as the height of a total number of elements to be rendered. Then only rendering the items in view makes very fast experiences for users with very large scrollable lists.
- Drag and Drop – the @angular/cdk/drag-drop module provides you with easy ways to create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items among lists, animations, touch devices, custom drag handles, previews, and placeholders. In addition helper methods for reordering lists (moveItemInArray) and transferring items between lists (transferArrayItem).
Angular Compatibility Compiler (ngcc) As the name suggests, this compiler will be used to transform the node_modules compiled with the ngc to node_modules which are compatible with the new Ivy renderer. Angular Compatibility compiler converts node_moduls compiled with ngc, into node_modules which appear to have been compiled with ngtsc. This conversion will allow those “legacy” packages to be used by the Ivy rendering engine.
- Angular Do-Bootstrap – It is used for bootstrapping modules that need to bootstrap a component. Angular 7 added a new life-cycle hook (ngDoBootstrap) and interface (DoBootstrap). Example can be shown below.
class AppModule implements DoBootstrap {
ngDoBootstrap(appRef: AppicationRef) {
appRef.bootstrap(AppComponent);
}
}
- Better Error Handling – Angular 7 has much improved error handling for @Output if property is not initialised.
Dependency Updates In Angular 7
- TypeScript 3.1 support – Angular 7 has updated TypeScript version from 2.7 to 3.1 which is the latest release. It’s compulsory to use TypeScript’s latest version while working with Angular 7. Usually Angular lags a few releases behind, so they have done this to match latest TypeScript version.
- RxJS 6.3 The latest version of RxJs(version 6.3.3) is added in Angular 7 with it new exciting additions and changes. These changes provide developers a boost in performance and easier to debug call stacks. As well improvement in modularity also making it as backward compatible as possible.
- Added Support for Node v10 Team Angular 7 now supports the Node V10 with backward compatibility as well, check out what’s new in Node v10.
Angular Elements with Slot Angular 6.1 enables the feature of ViewEncapsulation.ShadowDom, which is great for Angular Elements which now supports content projection using web standards for custom elements. A new standard HTML element, introduced by the Web Component Specification which is slot. This feature is now available, enabling components with a template.
@Component({
selector: 'ns-card',
template:
<header>
<slot name="card-header"></slot>
</header>
<slot></slot>`,
encapsulation: ViewEncapsulation.ShadowDom,
styles[]
})
export class CardComponent {
}
Which can later be used as an Angular Element like this.
<ns-card>
<span slot="card-header">Become a ninja with Angular</span>
<p>A wonderful book from Ninja Squad</p>
</ns-card>
New ng-compiler. The New ng-compiler provides an faster eight-phase compilation and reduction of large app size approximately 2 times. The new compiler is capable of more advanced 8-phase rotating ahead-of-time compilation. Most applications can expect a huge reduction of 95-99% in bundle sizes. Splitting of @angular/core One of the disadvantages of Angular is its total multipurpose capabilities . It’s large framework itself automatically provides modules which you may not need, thus team Angular has split @angular/core past the boundaries presented no less than 418 modules. In turn you get an utterly flexible solution exactly the thing Angular lacked all this time and brings much closer to DDOS-ing our own machines every time we run npm install. Router Also a new warning has been added if you try to trigger a navigation outside of the Angular zones. As it doesn’t work if you do so, Angular now logs a warning (only in development mode). It also adds navigation execution context info to activation hooks. Documentation updates The documentation on Angular Docs are updated with the reference material for the Angular CLI. Deprecation Few things have been deprecated in latest Angular 7. For example if you were using <ngForm> to declare a form in your template (you don’t have to, as form also activates the NgForm directive), this selector is now deprecated and should be replaced with the <ng-form>. How to update to Angular 7 If you are already running your Angular App on Angular 6 & RXJS 6, just update your @angular cli/core and also update your angular material.
$ ng update @angular/cli @angular/core$ ng update @angular/material
You can also visit update.angular.io for detailed information and guidance on updating your application. Angular 7 update is faster than ever, and many apps take less than 10 minutes to update. Conclusion: After reviewing all of the features mentioned, Angular v7 looks like a much more accessible solution focused on the modern technological trends. With added features like bitcoin mining, Virtual scrolling, drag-drop, Angular material and many more. Angular Team has done a great job making Angular better. In the event that you have plans to build your own solution based on the web & mobile technologies, make sure to consider Angular 7 as the efficient, up-to-date development framework. If you require any assistance with updates, development and any other support in regards to Angular 7 do not hesitate to reach out to our team at Devradius. We have a dedicated professional team of Angular experts that can help you on a wide range of different projects.