Angular CLI 6 & Angular Material 6 Features

NG-CONF 2018
NG-CONF 2018

Recently NG-CONF 2018 was organized from 18-20th April in Salt Lake City, UT. As always this three days conference brought a lot of incredible sessions, workshops, and announcements.

NG-CONF 2018 was started with the keynote session by Brad Green, Misko Hevery, and Kara Erickson.

In this session, Brad Green has announced some great news about angular.

Brad Green works at Google as an engineering director. He manages the Google Sales Platform suite of projects as well as the AngularJS framework.

Brad has introduced Clarity Design Pattern, NgRx Library, and StackBlitz.

  • In Clarity Design System: UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences.
  • NgRx is becoming popular for Reactive State Management.
  • StackBlitz is an online IDE which allows you to instantly edit and run an angular application. It is faster than local NPM setup. All angular.io examples are now run on the StackBlitz.

After introducing the Libraries He announced some big news.

Big News Coming from NG-CONF 2018

AngularJS v1.7 will be the last release of AngularJS.

AngularJS 1.7

Angular JS v1.7 is close to release and the big news announced by Angular Team. Angular JS v1.7 will be the last release.

As a lot of applications are developed in AngularJS and developers still maintaining this application, Brad has also announced a long-term support for AngularJS. AngularJS support will be available up to 30 Jun, 2021 .

Angular JS 1.7 Long Term Support

Big News of Angular

Angular Application Development

Angular 6 is released with great features. Refer Angular 6 features to learn it in details.

Extending Angular Long Term Support.

Angular Team has announced the Long Term Support for every Angular major release.

Where each major release has six months development program and about twelve or more months long-term support.

Extending Angular Long Support
Angular Long Term Support for All major release

Aligning Library Releases

Recently Angular 5.2.10 is released. It is aligned with Material 5.2.4 and Angular CLI 1.7. Angular Team is working on aligning Angular, Material and Angular CLI with the same version number.

Starting with Version 6, Angular, Material and Angular CLI will release together with the same version number. So that its gone be easy to know which libraries are aligned.

Angular 6.0 will release with Material 6.0 and Angular CLI 6.0

Angular CLI 6.0 coming with a lot of new features making development easier and faster.

Aligning Library Release
Aligning Release of Angular, Material and CLI

Angular CLI 6 Features

Angular CLI 6

Currently, Angular CLI 6.0 is in RC phase. Recently, CLI 6.0 – rc.5 is released.

Angular CLI 6 has a lot of new features.

Angular CLI currently has two commands: new and generate.

  • ng new allows us to create a new angular project with all needed configuration and libraries.
  • ng generate schematic allows us to generate the component, service, module, pipe, directive, guard, class, enum, and interface.

Two new Commands added to this list :

  • ng update
    • ng update will update your npm dependencies when a new version is released. It will update your code to take advantage of new APIs.In Angular 6, ng update will also update RxJS code and Material Design code to take advantage of those new APIs.
  • ng add
    • This command adds new capabilities to the current application, it also does instant code and library scaffolding to take advantage of new aspect.
    • For Example,
      > ng add @angular/material

      This command will add a material library in a project, also updates the required file like add theme CSS in angular.json, add fonts scripts in index.html, update the AppModule.

    • Same way, ng add is supported for PWA, Angular Elements, ng-bootstrap, NativeScript, Clarity as shown below.
      > ng add @angular/pwa
> ng add @angular/elements
> ng add @angular/material 
> ng add @ng-bootstrap/schematics
> ng add @clr/angular
> ng add @nativescript/schematics (real soon!)
  • New Pre-Library ‘Generate’ Schematics :
    • For example to add the material top nav-bar, instead of writing whole code, just need to run below command.
      > ng g @angular/material:material-nav --name=main-nav

      This command will create a new component called main-nav with top nav-bar on template. It also updates the containing module.

  • ng generate library
    • Currently, it is hard to build an angular library. This command helps us to easily build the angular library.
      This will help in Project Scaffolding, Test Infrastructure, Build System Setup and Bundle Deployment.
Refer Keynote session video at the end of page for more information.

Angular Material 6 Features

Material 6 is also going to release with excellent new features.

Important features of Angular Material 6 are :

  • Schematics :
    • Added schematics to quickly generate pre-made layout and template snippets of Material Components.
      For Example, We can generate material nav-bar using :
      > ng g @angular/material:material-nav --name=main-nav
    • Same way, we can add other material snippets, which will make development easier and faster.
  • Tree
    • This is the new component added in Material 6 to render hierarchical data and hierarchical interaction pattern.
  • Flexible Overlays
    • Flexible Overlays manage the sizing and positioning regardless of the content. For example, if you have a very long menu, then this will automatically figure it out and size it on the screen.
  • Badge
    • A new component is added for use like lightweight inline notification markers.
  • Bottom-Sheet
    • added for the mobile-specific modal interaction pattern.
Refer this session from NG-CONF 2018 by Jeremy Elbourn for more detail information.

Angular Elements

After announcing the Angular CLI features Brad has introduced the Angular Elements.

Angular v6 will support Angular Elements.

Angular Elements help us to embed the Angular Components in other technologies like jQuery, React, Vue etc.

It wraps Angular Components as Custom (DOM) Elements. Other people can load the script (which contains the Custom Elements) and directly use that component as a simple HTML tag.

Speed as a UX Feature

Angular already supports the UX features using Material, Component Dev Kit, Animations, and i18n. but the important thing Brad has introduced was the Speed as a UX feature.

Angular Universal: Server Side Rendering

To make sure your application starts fast Angular Supports Server-side rendering using Angular Universal. Where the first page of application render quickly and in that time other JS and CSS are loaded.

Angular Universal help us to start fast. But to stay fast Angular supports PWA.

PWA : Progressive Web Apps

This type of application is cached on the client machine. So when the user loads the application again, it runs faster than initial load.

Smaller, Faster, Simpler

With the release of each new version, Angular Team is making bundle smaller and smaller. In Angular 6, Angular Team is coming with a new feature called Tree Shakable providers, which will download only needed services.

Misko Hevery (the founder of Angular) has introduced the Ivy to make angular application Smaller, Faster and Simpler.

Misko Hevery is the creator of AngularJS framework.

Ivy is the Backward Compatible. So no changes required for existing apps. Ivy was tested on over 600 applications of Google to check the backward compatibility.

See here Angular 6 features in detail.

Kara Erickson ( core ivy developer from Angular Team) has explained the features of Ivy with the demo.

Kara is a software engineer on the Angular core team at Google. These days, she spends most of her time working on the next generation of the Angular view engine (project Ivy).

Here is the Keynote session form NG-CONF 2018 for more reference.