Site icon Bootsity

New features in Angular 6

bootsity

1. Overview

Latest release of Angular got into production recently and Angular 6 is power packed with so many features and enhancements. In this article we will have a look on the new additions in the latest Angular 6.

2. Core enhancements

Let’s first talk about the core and most improvements and addition in this latest release of Angular.

2.1 TypeScript 2.7+ support

With typescript 2.7 comes conditional type declarations, default declarations and strict class initialisation. You can see the release notes here for a comprehensive list of additions to TypeScript 2.7. Now you can think something like:

// conditional type declarations example
type payeeType<T> = T extends vendor ? payeeImmediate :
                    T extends partner ? payeeLater :
                    T extends provider ? payeeImmediate :
                    payeeStandard;

2.2 Elements

Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. Custom elements are a Web Platform feature. For example, if you create your popup element and want to use it anywhere in your application, you can simply write:

<my-popup message="Hello Bootsity!"></my-popup>

Read more about elements here.

2.3 Components Development Kit

The initial version of CDK or Components Development Kit was released in 2016 but now it is stable and more compatible to Angular 6. Developers can use CDK to create their own components with less efforts. Angular developers have refactored CDK into a standalone library @angular/cdk It includes features like a11y (accessibility), bidi (bi-directional text) and much more. The official documentation of CDK is here.

3. Performance

In Angular 6, team have done some notable work. New compiler and rendering engine have been added. Let’s see what’s included to make Angular faster.

3.1 Ivy Renderer

Ivy Renderer is the new rendering engine for Angular which is not only backwards compatible but also offers optimisation of the size of final package. For now, it is not the default renderer, developers can manually enable it in compiler options in tsconfig.json:

"angularCompilerOptions": {
  "enableIvy": true
}

3.2 Bazel Compiler

Bazel is Google’s build system and is used in the organisation very extensively. Now Angular will have Bazel compiler support. It uses advance local and distributed caching, optimised dependency analysis and advanced parallel execution. You can find out more about Bazel here.

4. CLI Changes

4.1 ng update and ng add

With Angular 6, updating application is an command away – ng update. External libraries can listen for this command and update themselves too. In background, it will use the npm or yarn’s plain old package.json

ng update @angular/core

Similarly, with ng add, you can add 3rd party libraries to your application

ng add @angular/material

4.2 configuration file changes

Historically, angular projects used a file known as .angular-cli.json but with the latest release, the file is renamed to angular.json and it’s structure is also changed. It looks like

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "targets": {
        "build": {},
        "serve": {},
        "extract-i18n": {},
        "test": {},
        "lint": {}
      }
    },
    "ng-app": {
      "root": "e2e/",
      "projectType": "application",
      "targets": {
        "e2e": {},
        "lint": {}
      }
    }
  },
  "defaultProject": "ng-app"
}

5. Library Changes

5.1 Navigation

Currently, in NavigationStart there is no way to know if navigation was triggered imperatively or via the location change. With navigationSource in place, the source of the navigation e.g scroll position or URL/URI change can be identified. restoredState will give the restored navigation id which leads to current navigation. These two properties help us to handle multiple use cases in routing.

constructor(router:Router) {
  router.events.subscribe(event => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  }
});

5.2 Forms

Added multiple validators for array method of FormBuilder

new Control('', 
    Validators.compose(
        [Validators.minLength(5), Validators.required]
    )
);

5.3 Model

NgModelChange is emitted after value and validity are updated on its control. Previously, it was emitted before updated. As the updated value of the control is available, the handler will become more powerful.

<input (ngModelChange)="modelChanged($event)">

5.4 Comments

Support for singleline, multiline & jsdoc comments in the code

/**
 * Set the shoe's color. Use {@link Shoe#setSize} to set the shoe size.
 *
 * @param {string} color - The shoe's color.
 */
Shoe.prototype.setColor = function(color) {
    // ...
};

6. Conclusion

Clearly, Angular 6 have something to offer that everyone would love from a UI designer to developer to DevOps person to website optimiser. Angular is one of the most used library these days and we hope to see more updates to this library which can help us to develop things easier and faster.

Exit mobile version