What's new in Angular 6
by Gerard Sans | @gerardsans

by Gerard Sans | @gerardsans
Google Developer Expert

Google Developer Expert
International Speaker

Spoken at 75 events in 23 countries

Blogger
Blogger
Community Leader

900
1.4K
Trainer

Master of Ceremonies

Master of Ceremonies
















Angular Academy



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 v5 LTS begins with v6
Goals
- Fixed release calendar
- Incremental upgrades
- Stability
- Reliability
Timeline
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 v6
Smaller, Faster and Easier to use
Webpack 4. RxJS 6. TS 2.7
Angular Elements. Ivy Renderer
Tooling improvements
2018
Angular v6

New Features (1/2)
- Webpack v4. Further optimizations
- Services are now tree-shakeable
- Support inline, multiline, jsdocs comments
-
preserveWhitespaces false by default
- APIs for: formatNumber, formatPercent, formatCurrency and formatDate
New Features (2/2)
- Forms. Multiple validators for array API
-
Router. New properties NavigationStart
- navigationSource, restoredState
- Service worker. Safety-script to uninstall
-
Testing. New optional arguments
- whenStable(done, timeout, update)
// BEFORE
@Component({
template: `<my-element #my-element></my-element>`
})
class MyComponent {
@ViewChild('my-element') myElement:ElementRef;
ngAfterViewInit() {
this.myElement.nativeElement; // type is "any"
}
}
app/my.component.ts
Optional type ElementRef
// AFTER
@Component({
template: `<my-element #my-element></my-element>`
})
class MyComponent {
@ViewChild('my-element') myElement:ElementRef<MyElement>;
ngAfterViewInit() {
this.myElement.nativeElement; // type is “MyElement”
}
}
app/my.component.ts
Optional type ElementRef
Angular CLI
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
Angular CLI v6
-
Add Webpack v4 final
-
Upgrade to webpack-dev-server v3
-
Support aditional Lazy Load Modules
-
Support for prepackaged schematics
- ng add @angular/material
{
"compilerOptions": {
"experimentalDecorators": true,
...
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"preserveWhitespaces": false,
"enableResourceInlining": true,
"enableIvy": true,
}
}
tsconfig.json
Resource Inlining Support
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent { }
app/app.component.ts
Before
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<hello></hello>`,
styles: [`p { font-family: Lato; }`]
})
export class AppComponent { }
app/app.component.ts
After
RxJS v6
RxJS v6 Goodies
-
Friendly imports
- rxjs, rxjs/operators
-
EcmaScript spec compliant
- Pipeable operators
- Avoid reserved keywords
-
Simplified API
- Result Selectors removed
Operator Renames
do throw switch finally
tap throwError switchAll finalize
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/filter';
const isOddNumber = (x: number) => x%2!==0;
Observable.interval(1000)
.filter(isOddNumber);
// --0--1--2--3--4--5-- interval
// -----1-----3-----5-- filter
src/app.component.ts
Listing odd numbers - RxJS v5.5
import { interval } from 'rxjs';
import { filter } from 'rxjs/operators';
const isOddNumber = (x: number) => x%2!==0;
interval(1000).pipe(
filter(isOddNumber)
);
// --0--1--2--3--4--5-- interval
// -----1-----3-----5-- filter
src/app.component.ts
Listing odd numbers - RxJS v6
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/finally';
Observable.throw("💩").subscribe({
error: e => l(`Error: ${e}`)
})
Observable.throw("💩")
.catch(e => of("No worries. Sorted!😃"))
.finally(() => { /* code */ })
.subscribe(v => l(v));
src/app.component.ts
Error Handling - RxJS v5.5
import { throwError } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';
throwError("💩").subscribe({
error: e => l(`Error: ${e}`)
})
throwError("💩").pipe(
catchError(e => of("No worries. Sorted!😃")),
finalize(() => { /* code */ }),
).subscribe(v => l(v));
src/app.component.ts
Error Handling - RxJS v6
Animations
// <div [@fade]="fade" fast></div>
// <div [@fade]="{ value: fade, params: { type: 'fast' }}">
const hasAttribute = (attribute: string) =>
(fromState: string, toState: string,
element: any, params: {[key:string]: any}
): boolean =>
element.hasAttribute(attribute) || (params && params.type==attribute);
}
export const fade = trigger('fade', [
state('fadeIn', style({ opacity: 1 })),
state('fadeOut', style({ opacity: 0.1 })),
transition(hasAttribute("fast"), animate('100ms linear')),
transition('fadeIn <=> fadeOut', animate('400ms linear')),
]);
animations.ts
Dynamic transition matcher
Forms
export class HelloComponent {
version: FormControl = new FormControl('6.0.0', Validators.required);
form: FormGroup = new FormGroup({ v: this.version });
constructor() {
this.form.statusChanges // VALID INVALID PENDING DISABLED
.subscribe(status => console.log(status));
this.version.markAsPending(); // emits PENDING
this.version.markAsPending({onlySelf: true}); // no output
this.version.markAsPending({emitEvent: false}); // no output
}
}
app/hello.component.ts
markAsPending
Breaking Changes

Overview
- Forms. New PENDING event may require review current code
- Dropped support <template> Element
- No animation imports @angular/core
-
Baseline dependencies
- Webpack v4, TS 2.7 and RxJS v6
- SSR. Domino v2
Future



Angular Elements

Ivy Compiler



What's new in Angular 6! - Bratislava
By Gerard Sans
What's new in Angular 6! - Bratislava
In this interactive session, we'll cover all the cool new stuff and changes in version 6 of Angular!
- 3,395