What's New in

Angular 7 ?

About me

  • Frontend Developer @ Vertice International

  • Creator of DevNote

Nutti Saelor (Lee)

​facebook.com/devnoteio

medium.com/devnote

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 update

For 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-name

Angular CLI

ng add @angular/material

CLI Prompts or Schematics Prompts

$ ng add @angular/material

Application Performance

Application Performance

https://link.medium.com/YbVPppPToR

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

https://link.medium.com/7wPzdldVoR

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';
cdkDrag
cdkDrag
cdkDropList
cdkDropList
cdkDropListConnectedTo

Angular 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 ?

https://link.medium.com/0qTAdQFDiR

What about Ivy ?

Ivy Status

What about Ivy ?

Ivy Status

Thank you

Made with Slides.com