Angular 5: Summary of New Features &Upgrading  

Zenab Saleem

/zenabSaleemKhan

/zenabKhan

@zenabSaleemKhan

Who am I?

Full Stack Developer. Love to learn new skills. Always up for challenging stuff.

Interests: Food, Machine learning, and cats :p

Passionate about contributing to social welfare and  women empowerment

Interesting trends: Angular

StackOverflow : Highest # of tags

Source: https://stackoverflow.blog/2017/11/13/cliffs-insanity-dramatic-shifts-technologies-stack-overflow/

Github: Angular contributors

Developers survey: Most popular ​frameworks

Source: https://insights.stackoverflow.com/survey/2017#technology-frameworks-libraries-and-other-technologies

Angular 5: Overview

  • Release Date: 2017-11-01
  • Code named: Pentagonal-donut
  • Includes: New features & internal changes for better performance
  • Latest version: 5.0.2
  • Beta version: 5.1.0-beta.1 

 

Angular 5: Performance

Angular CLI v1.5: Build optimizer, enabled by default

  • Better tree shaking
  • Removing angular decorators

Angular compiler improvements

Angular 5: Performance cont.

  • Uses TypeScript transforms
  •  ng serve --aot

preserveWhitespaces

Angular 5: Performance cont.

tsconfig.json

Per-component basis

Angular 5: New features

Forms validation

  • Default change event
  • Blur or submit events
  • ​Form fields or entire form

Before

Template-driven form

<input name="firstName" ngModel>

After

<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
<form [ngFormOptions]="{updateOn: 'submit'}">

Or

Before

Reactive forms

new FormGroup(value);
new FormControl(value, [], [myValidator])

After

new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

Angular 5: New features cont.

Router Events

  • Track routes
  • Helpful for adding spinners
constructor(public router: Router, spinner: Spinner) {
    router.events.subscribe(e => {
      if (e instanceof ChildActivationStart) {
        spinner.start(e.route);
      } else if (e instanceof ChildActivationEnd) {
        spinner.end(e.route);
      }
    });
  }

Angular 5: New features cont.

Progressive Web Apps (PWAs)

  • New package @angular/service-worker
  • Better support for service workers

Angular 5: Upgrading from previous versions

https://angular-update-guide.firebaseapp.com/

$ npm install @angular/{animations,common,compiler,
compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,
platform-server,router}@5.0.2
$ yarn add @angular/{animations,common,compiler,compiler-cli,core,
forms,http,platform-browser,platform-browser-dynamic,
platform-server,router}@5.0.2

npm

yarn

Angular 5: Upgrading from previous versions cont.

  • Upgrade to TypeScript 2.4.2
  • Upgrade to RxJS 5.5.2
  • Change your project’s <template> tags to <ng-template>.
  • HttpClientModule over HttpModule
import { HttpClientModule } from '@angular/common/http';

Angular 5: Upgrading from previous versions cont.

  • Dropped the intl api in favour of data exported from the Unicode Common Locale Data Repository (CLDR)

  • Need to update pipes (date, currency or percent)

Angular 5: Upgrading from previous versions cont.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
  map(user => user.name),
  filter(name => name),
);

Instead of

You can now

Thank you :)

Angular 5: New features

By Zenab Saleem

Angular 5: New features

  • 956