Angular 8 Features: Angular 8 Released with New Features

Angular 8 Features: Angular 8 Released with New Features

Angular 8 Features: Angular 8 Released with New Features - Let's see the new Angular 8 features in more details.

Let's see the new Angular 8 features in more details.

Angular is the most popular platform for developing client-side (front-end) mobile and desktop web apps or SPAs. With the new release of Angular 8, we have a new set of powerful features that developers will appreciate which are added at many levels; the core framework, Angular Material library and the CLI. It has also enabled many major partner launches such as NativeScript (a framework for building native mobile apps with Angular), Angular Console (console for running Angular projects on your system),@angular/fire (for integrating Firebase with Angular) and StackBlitz (an online IDE for Angular).

In this post we are going to summarize some of the most important new features officially announced by the Angular Team.

This version is a major release that involves the complete platform, including the Angular core framework, Angular Material, and the Command Line Interface or CLI.

Angular 8 brings many new features, particularly for the tool-chain.

Angular 8 Features

As planned, Angular 8 was released and these are the new and most important features:

Preview of Ivy

With the release of Angular 8, a preview version of Ivy is now available for testing. Ivy is a new rendering engine that will produce smaller bundle sizes. But it's not recommended to start using it in production not just yet.

If you would like to start playing with Ivy, you can instruct the Angular CLI to enable Ivy in your project using the --enable-ivy switch:

$ ng new angular-project --enable-ivy

Web Workers

Thanks to Angular CLI 8, web workers are taken into consideration when building the production bundles which helps increase the performance. Angular CLI 8 provides now one bundle for every web worker.

Lazy Loading

The Angular Router has always supported lazy loading but now wiht Angular 8 the support for dynamic EcmaScript imports is added. For example:

    path: 'lazy',
    loadChildren: () => import('./mylazy/mylazy.module').then(mod => mod.Module)

Improvement of ngUpgrade

Angular 8 has also added new features to ngUpgrade which makes easier for developers to upgrade their Angular.js apps to Angular 8.

Angular 7 Features

v7 introduces many new changes in the Component Dev Kit or CDK and the Material Design library such as the Drag and Drop support and Virtual Scrolling.

In this release, the team has also focused on the Ivy renderer and how to make it smaller and faster by adding support for animation and improving the @NgModule integration etc. But Ivy is not yet ready for prime time.

These are the new features introduced by Angular 7 for developers.

Support for Node 10

Node v10 is the latest version of the Node.js platform which is used by the Angular CLI and most front-end development tools nowadays. v7 has now support for v10 of Node but v8 is also still supported.

Support for TypeScript 3.1

TypeScript 3.1 is the latest version of TypeScript, the official langauge for Angular. Angular 7 requires the latest version of TypeScript.

The CLI Prompts

Angular 7 introduces a new nice feature that allows the CLI to prompt users when executing commands like ng new or ng add. This enables users to make decisions for chosing the right built-in features to include or ignore at many points of the life-cycle of the project's creation and configuration.

As the Angular team is always focusing on making the CLI a powerful tool at the disposal of developers, the new CLI prompts feature is another step toward achieving that goal. More than often, when you use common commands like ng new or ng add, you don't have much control except what you pass as arguments in the first place. But what if you intend to add support for routing in your project but did not specify the --routing switch? You need to stop the command and start over. What, about when you want to avoid installing some unecessary dependencies? Aside from stopping the running command, you have no other options

But thanks to Angular CLI 7, this has changed. Now the CLI supports user prompts. For example, if you run the ng new angular-7-project, you'll presented with a nice prompt asking if you xant to include routing in your project. If you also like to use a specific stylesheet format? The CLI will present you with a list of choices between CSS, SCSS and SASS.

Not just that, you have complete control over the CLI prompts. You can simply add a schematic.json file to instruct the Angular 7 CLI to show or hide specific prompts.

CLI Prompts are also added to Angular Shematics which means developers of CLI tools can take advantage of it to prompt users for more information about customizations and act accordingly. This can be done using an x-prompt key to a Schematics collection.

Angular Performance: CLI Budgets by Default

The obvious fact is that Angular 7 is the best Angular yet! It's more performant and faster than any previou version including v6.

Upgrade from v6 to v7 consumes less time (no more than ten minutes according to the official docs). Also the upgrade process is more easier thanks to the work done in v6. Also the core framework has better performace with the new features such as the virtual scrolling detailed on below section.

But that's not the end of the story. Angular 7 gives importance to the final app bundle not just the framework by correcting a common production bug where the reflect-metadata polyfill gets added in the production build as well but it's only required in development so v7 will remove automatically from your final app's bundle.

For generating smaller bundles, new Angular 7 projects are using the Bundle Budgets in the CLI by default which were optional in v6.

Developers will get warnings when the initial bundle sizes more than 2MB and an error when it has a size of 5MB. But you can easliy change the default budgets from the angular.json file.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"

Virtual Scrolling: ScrollingModule

Virual scrolling is a technique used by popular UI libraries like Ionic for enabling developers to build efficient UIs. Loading hundreds of items could be very slow in most browsers, virtual scrolling takes performance in consideration and it's particularly useful for mobile apps when you need to scroll large lists without affecting the app's performance and by result the user's experience.

Now the Angular 7 CDK includes support for virtual scrolling via the ScrollingModule module. You can use the <cdk-virtual-scroll-viewport> to display large lists of data by only rendering the elements that actually fit on the visible part of the screen.

You can read more information from Angular Material docs.

Support for Drag and Drop: DragDropModule

With Angular 7, drag and drop support is added on the CDK. Items are rendered as long as the user is moving elements. Developers can use methods like moveItemInArray for reordering lists or transferArrayItemfor moving items between lists.

You can read more about drag and drop.

Support for <Slot> HTML Element with Angular Elements

<slot> is a new standard HTML tag that was introduced by the Web Component specification.

You can now write compnenets like the following example:

  selector: 'a-component',
  template: `
      <slot name="header"></slot>
  encapsulation: ViewEncapsulation.ShadowDom,
  styles: []
export class MyComponent {

You can then use this Angular component as a web component:

  <span slot="header">This is a header</span>
  <p>Hello Angular!</p>

New Features of Angular 6.1

Angular 6.1 is released in 2018-07-25 with multiple bug fixes and new features.

Angular CLI is also updated to Angular v6.1.1.

Angular 6.1 is the last planned minor version of Angular 6. That means, the Angular team will start working toward releasing Angular 7, the next major version.

Angular 6 major release has a strong focus on the developer toolchain i.e Angular CLI which introduces powerful features such as project workspaces and Schematics etc. Now Angular 7 is on the road after this latest minor version which will be focused on new features such as the Ivy Renderer.

Let's see the new features and how can make Angular developer lives easier.

This new minor release has over 70 bugfixes and 20 new features!

What's New with Angular 6.1?

Angular 6.1 brings many new features to Angular such as:

  • You can, now configure Angular Router to remember and restore the position of scroll by setting scrollPositionRestoration to enabled.
  • You can use ShadowDOM v1 API for View Encapsulation to specify how CSS is encapsulated in a component (encapsulation: ViewEncapsulation.ShadowDom).
  • You can use async/await with Jasmine etc.
  • You can use a new pipe that allows you to iterate over a map or object and display key/value pairs in the template.
  • Support for TypeScript 2.9: With Angular 6.1, you'll be able to use TypeScript 2.8 and TypeScript 2.9
  • Angular CLI v6.1.1: Angular CLI v6.1.1 is also released with many new features that you can see below.

    Angular CLI v6.1.1 New Features

  • Support for TS 2.8 and 2.9,
  • Support for Angular 6.1,
  • The use of ES2015 Modules for all files,
  • The new --vendor-source-map switch that allows you to have source maps for vendor packages. This is useful for debugging your production packages.


This post is updated with the new Angular 8 features as v8 was just released.

Now the Angular team is working toward releasing Angular 9!

angular web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer?, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.