What's New in
Angular 7 ?
About me
-
Frontend Developer @ Vertice International
-
Creator of DevNote
Nutti Saelor (Lee)
How to update ?
How to update ?
- Just a single line command
ng update @angular/cli @angular/core
or
ng update
$ ng update @angular/cli @angular/core$ ng updateFor more advance cases
Visit update.angular.io
Angular CLI
Angular CLI
Angular.io now includes CLI Doc
Angular CLI
CLI Promps or Schematics Prompts
ng new
$ ng new project-nameAngular CLI
ng add @angular/material
CLI Prompts or Schematics Prompts
$ ng add @angular/materialApplication Performance
Application Performance
The Cost of JavaScript
Application Performance
The Cost of JavaScript
Application Performance
Remove reflect-metadata polyfill
src/polyfills.ts
Application Performance
Remove reflect-metadata polyfill
Angular 6
Angular 7
Application Performance
Performance Budget
Application Performance
Performance Budget
A performance budget is a limit for pages which the team is not allowed to exceed. It could be a max JavaScript bundle size, total image weight, a specific load time or threshold on any number of other metrics.
Application Performance
Bundle Budgets
angular.json
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]Application Performance
Bundle Budgets
"budgets": [
{
"type": "initial",
"maximumWarning": "1mb",
"maximumError": "1.5mb"
}
]Angular Material & CDK
Angular Material & CDK
Angular Material 6
Angular Material 7
Angular Material & CDK
Virtual Scroll
- Render only visible items
Angular Material & CDK
Virtual Scroll
- import {ScrollDispatchModule} from '@angular/cdk/scrolling';
- Use *cdkVirtualFor inside <cdk-virtual-scroll-viewport>
- Set itemSize (each item height in pixel)
import {ScrollDispatchModule} from '@angular/cdk/scrolling';
*cdkVirtualFor<cdk-virtual-scroll-viewport>itemSize<cdk-virtual-scroll-viewport class="list-container" [itemSize]="53">
<div *cdkVirtualFor="let state of statesObservable | async;">
<div class="state">{{state.name}}</div>
<div class="capital">{{state.capital}}</div>
</div>
</cdk-virtual-scroll-viewport>Angular Material & CDK
Drag and Drop
Angular Material & CDK
Drag and Drop
- import {DragDropModule} from '@angular/cdk/drag-drop';
- Use cdkDrag for draggable items
- Add cdkDropList around a set of cdkDrag elements for grouping draggables into reorder-able collection
- Connect cdkDropList instances by setting cdkDropListConnectedTo property
import {DragDropModule} from '@angular/cdk/drag-drop';cdkDragcdkDragcdkDropListcdkDropListcdkDropListConnectedToAngular Material & CDK
<div>
<h2>To do</h2>
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="[doneList]"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
</div>
<div>
<h2>Done</h2>
<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
[cdkDropListConnectedTo]="[todoList]"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>Angular Material & CDK
Support native select element
- Native control has several performance, accessibility and usability advantages
<mat-form-field>
<select matNativeControl required>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</mat-form-field>Angular Elements
Angular Elements
Support Content Projection
@Component({
selector: 'app-root',
template: `
<h1>Hello Angular Elements</h1>
<slot></slot>
`,
encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent {}Angular Elements
Support Content Projection
<ng-element>
<h2>Content Projection Work!!!</h2>
</ng-element>Dependency Updates
Dependency Updates
- TypeScript 3.1 (Richer Tuple, Unknown Type)
- RxJS 6.3
- Node 10
What about Ivy?
What about Ivy ?
What about Ivy ?
What about Ivy ?
Ivy Status
What about Ivy ?
Ivy Status
Thank you
What's New in Angular 7
By Lee Lorz
