What's new in Angular 5!
by Gerard Sans | @gerardsans
by Gerard Sans | @gerardsans
Google Developer Expert
Google Developer Expert
International Speaker
Spoken at 70 events in 23 countries
Blogger
Blogger
Community Leader
900
1.4K
Trainer
Master of Ceremonies
Master of Ceremonies
Timeline
AngularJS
2-way databinding
2009
React
Component based view library
2013
React Native
Native Mobile Apps using React
2014
Vue
Progressive framework
2015
Polymer
Web Components library
Angular (v2)
Future ready
2016
Angular v4
Stable and performant
4.2 Animations
New angular.io website
4.3 HttpClient
2017
Angular v5
Smaller, Faster and Easier to use
PWA support
SSR. Material components
Bazel. Build time tools
2017
Angular
Web, Mobile and Desktop
Ecosystem
ngrx
RxJS
TypeScript
Visual Code
Ionic
NativeScript
Apollo
GraphQL
Performance
Community
Top 3
- React (v16.2)
- View library
- JSX/Flow/vDOM
- SSR
- Not opinionated
- MIT license
- Angular (v5.2.7)
- Framework
- TS/DOM
- SSR
- Opinionated
- MIT license
- Vue (v2.5.13)
- Framework
- Flow/DOM
- SSR
- Progressive
- MIT license
Benchmarks
Semantic Versioning
Semantic Versioning
X . Y . Z
MAJOR MINOR PATCH
Semantic Versioning
- v2 Sept 2016
- v4 March 2017
- v5 Sept/Oct 2017
- v6 March 2018
- v7 Sept/Oct 2018
Long Term Support (LTS)
- Only critical fixes and security patches
- Angular v4 begins October 2017
Goals
- Fixed release calendar
- Incremental upgrades
- Stability
- Reliability
Angular CLI
Angular Rapid Development
Main Features
- Command Line Interface to create Angular Applications
- Full configuration: build, test, scaffolding
- Development and Production
- Follows latest Style Guide
Angular CLI 1.4
- Schematics
-
schematics/@angular
-
- Custom Serve Path
-
ng serve --serve-path custom
-
http://localhost:4200/custom
-
-
AOT Missing translation Strategy (I18n)
-
--missing-translation error
-
7th Sept
Angular CLI 1.5
- Build Optimiser active by default
- Mark pure sections
- Remove decorators (reflect-metadata)
- Incremental compilation
- ng serve --aot
- disable: --no-build-optimizer
1st Nov
Angular CLI 1.6
-
Service Worker Support
- --service-worker for new CLI projects
- SSR (universal)
- ng generate universal server-app
- ng build --prod --app=server-app
- App Shell
- ng g app-shell appShell --universal-app=server-app
6th Dec
Angular CLI 1.7
-
Add Webpack v4 support
-
Support for upgrades
-
ng update --next
-
-
Ability to specify budgets for your apps
-
bundle, initial, allScript, all, anyScript, any
-
baseline, max, min, warning, error
-
bytes, KB, MB, %
-
15th Feb
Compiler
Latest changes
- Faster builds
- Incremental compilation
- Replace ReflectiveInjector (static)
- Performance
- Support run-time expressions
- {provider: N, useValue: calculate()}
Latest changes
- Faster Zone implementation
- Disable zones (high performance)
- Multiple exportAs
- Angular Material migration
Universal
Latest changes
- New State Transfer API
- Server Side DOM (Domino)
- 3rd party Component Libraries
RxJS 5.5
lettable Operators
// before
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/filter';
Observable.interval(1000)
.filter(x => x%2!==0) // --1--3--5--
// after
import { Observable } from 'rxjs/Observable';
import { interval } from 'rxjs/observable/interval';
import { filter } from 'rxjs/operators';
interval(1000)
.pipe(
filter(x => x%2!==0)
)
Forms
Latest changes
-
Added new options argument
- FormControl, FormGroup, FormArray
- Fine-tune when to update and validate
- ngFormOptions, ngModelOptions
- New validators
- min and max
New options argument
// validator function
const ctrl = new FormControl('', Validators.required);
// options argument
const form = new FormGroup({
password: new FormControl('')
passwordRepeat: new FormControl('')
}, {
validators: passwordMatchValidator,
asyncValidators: userExistsValidator
});
// arrays
const g = new FormGroup({
one: new FormControl()
}, [passwordMatchValidator]);
Template driven: updateOn
<form [ngFormOptions]="{updateOn: 'blur'}">
<!-- will update on blur-->
<input name="one" ngModel>
</form>
<form [ngFormOptions]="{updateOn: 'blur'}">
<!-- overrides and will update on change-->
<input name="one"
ngModel [ngModelOptions]="{updateOn: 'change', standalone: true}">
</form>
Model driven: updateOn
const c = new FormGroup({
one: new FormControl()
}, {updateOn: 'change'});
const c = new FormArray([
new FormControl()
], {updateOn: 'blur'});
const c = new FormControl(, {
updateOn: 'submit'
});
min and max Validators
<form>
<!-- Requires formControlName, formControl, ngModel -->
<input type="number" ngModel [min]="2" [max]="100">
</form>
// { 'min': 2, 'actual': 1 }
// { 'max': 100, 'actual': 2000 }
Router
Latest changes
- Added new events
- ActivationStart/End
- GuardsCheckStart/End
- ResolveStart/End
- Tracking activation of specific routes
- RouterEvent
New Events
import { Router, ActivationStart, ActivationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';
@Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
constructor(private router: Router) {
router.events
.filter(e =>
e instanceof ActivationStart || e instanceof ActivationEnd)
.subscribe(e => console.log(e.toString()));
}
}
Tracking specific urls
import { Router, RouterEvent } from '@angular/router';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/distinctUntilChanged';
@Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
constructor(private router: Router) {
router.events
.filter(e => e instanceof RouterEvent)
.filter(e => e.url == '/about')
.distinctUntilChanged((e1, e2) => e1.id == e2.id && e1.url == e2.url )
.subscribe(e => {
console.log(e.id, e.url);
});
}
}
i18n
Latest changes
- Unicode Common Locale Data Repository (CLDR) instead of Internationalisation API
- Uses timezone/locale from user
- Default locale: en-US
- Support for
- DatePipe, CurrencyPipe, DecimalPipe, PercentPipe
Using specific locales
// no en-US locale
import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
registerLocaleData(localeEs);
// period data extras Eg: midnight, noon, morning, afternoon, evening, night
import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
import localeEsExtra from '@angular/common/locales/extra/es';
registerLocaleData(localeEs, localeEsExtra);
DatePipe
- New formats
- long, longDate, longTime
- full, fullDate, fullTime
- Added timezone and locale support
DatePipe Examples
// common usage using pre-defined format string
{{ d | date: 'shortDate' }} // en-US: 1/18/17
// specific locale
{{ d | date: 'shortDate': null: 'es' }} // es-ES: 18/1/17
// custom format string
{{ d | date: 'M/d/yy': null: 'es' }} // es-ES: 18/1/17
Breaking changes
DecimalPipe
// number[:digitInfo[:locale]]
// n = 2.718281828459045
// digitInfo defaults to 1.0-3
{{ n | number }} // outputs: '2.718'
{{ n | number: '4.5-5' }} // outputs: '0,002.71828'
{{ n | number: '4.5-5': 'es' }} // outputs: '0.002,71828'
CurrencyPipe
// currency[:currencyCode[:display[:digitInfo[:locale]]]]
// c = 1.3495
// display defaults to symbol
// digitInfo defaults to 1.2-2
{{ c | currency }} // outputs: '$1.35'
{{ c | currency: 'CAD' }} // outputs: 'CA$1.35'
{{ c | currency: 'CAD': 'code' }} // outputs: 'CAD1.35'
{{ c | currency: 'CAD': 'symbol-narrow': '1.2-2': 'es' }} // outputs: '1,35 $'
PercentPipe
// percent[:digitInfo[:locale]]
// p = 0.718281828459045
// digitInfo defaults to 1.0-0
{{ p | percent }} // outputs: '72%'
{{ p | percent: '4.5-5' }} // outputs: '0,071.82818%'
{{ p | percent: '4.5-5': 'es' }} // outputs: '0.071,82818 %'
What's new in Angular 5!
By Gerard Sans
What's new in Angular 5!
In this interactive session, we'll cover all the cool new stuff and changes in version 5 of Angular!
- 2,395