Angular 7: New Features = New Possibilities

A high-level overview of the features available in Angular 7 and some examples from the official Angular documentation.

Transcript

1. ANGULAR 7 ANGULAR 7 NEW FEATURES = NEW POSSIBILITIES NEW FEATURES = NEW POSSIBILITIES Presented by Jason Ruhlin, Manager Capital One Twitter: @softengjason Github: https://github.com/jsonRUHLS jsonruhls@gmail.com
2. ANGULAR 7 ANGULAR 7 Released October 18, 2018 Several blogs and presentations have been released explaining the new features and performance enhancements. Today we'll take a 10,000 foot overview...
3. CLI material Angular Blog Now v7 Virtual Drag Drop new update release Scrolling major features performance application take users support Schematics advantage projects Design includes elements Ivy Prompts partner improve
4. HELL YEAH YOU SHOULD!!! HELL YEAH YOU SHOULD!!!
5. CLI Schematic Prompts Official Docs CDK Drag and Drop Virtual Scroll A HIGH-LEVEL PERSPECTIVE A HIGH-LEVEL PERSPECTIVE Elements Content Projection Custom Elements ( Introduced in 6)
6. Schematics Prompts have been introduced and with them, we get new command line superpowers.
7. Schematics Prompts guide the user through the creation of new applications. ANGULAR CLI ANGULAR CLI $ ng new cliPresentation ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS SCSS [ http://sass-lang.com ] SASS [ http://sass-lang.com ] ❯ LESS [ http://lesscss.org ] Stylus [ http://stylus-lang.com ]
8. DRAG AND DROP DRAG AND DROP
9. DRAG AND DROP DRAG AND DROP <div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag> {{timePeriod}} </div> </div> moveItemInArray - reordering lists transferArrayItem - transferring between lists Helper Methods Horizontal Sorting Example import {Component} from '@angular/core'; import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; @Component({ selector: 'cdk-drag-drop-horizontal-sorting-example', templateUrl: 'cdk-drag-drop-horizontal-sorting-example.html', styleUrls: ['cdk-drag-drop-horizontal-sorting-example.css'], }) export class CdkDragDropHorizontalSortingExample { timePeriods = ['Bronze age','Iron age','Middle ages','Early modern period']; drop(event: CdkDragDrop<string[]>) { moveItemInArray(this.timePeriods, event.previousIndex, event.currentIndex); } }
10. DRAG AND DROP DRAG AND DROP
11. VIRTUAL SCROLLING VIRTUAL SCROLLING
12. VIRTUAL SCROLLING VIRTUAL SCROLLING <cdk-virtual-scroll-viewport itemSize="50" class="example-viewport"> <div *cdkVirtualFor="let item of items" class="example-item"> {{item}} </div> </cdk-virtual-scroll-viewport> CREATING ITEMS IN THE VIEWPORT CREATING ITEMS IN THE VIEWPORT *cdkVirtualFor replaces *ngFor inside of a <cdk­virtual­scroll­ viewport>, supporting the exact same API as . *ngFor import {ChangeDetectionStrategy, Component} from '@angular/core'; /** @title Basic virtual scroll */ @Component({ selector: 'cdk-virtual-scroll-overview-example', styleUrls: ['cdk-virtual-scroll-overview-example.css'], templateUrl: 'cdk-virtual-scroll-overview-example.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class CdkVirtualScrollOverviewExample { items = Array.from({length: 100000}).map((_, i) => `Item #${i}`); }
13. VIRTUAL SCROLLING VIRTUAL SCROLLING
15. ANGULAR CUSTOM ANGULAR CUSTOM ELEMENTS ELEMENTS CONTENT PROJECTION CONTENT PROJECTION INCOMPATIBLE
16. SLOT PROJECTION IN CUSTOM ELEMENTS SLOT PROJECTION IN CUSTOM ELEMENTS <awesome-custom-element> <span slot="message">My projected content</span> </awesome-custom-element> 1. Set ViewEncapsulation to ShadowDom 2. Use SLOT instead of <ng-content> import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'awesome-custom-element', template: ` <header> <slot name="message"></slot> </header> <slot></slot>`, encapsulation: ViewEncapsulation.ShadowDom }) export class AwesomeComponent {}
17. APPLICATION PERFORMANCE APPLICATION PERFORMANCE
18. Ng Compiler 8 phase compilation 2x reduction of app size PERFORMANCE ENHANCEMENTS PERFORMANCE ENHANCEMENTS Reflect-metadata Polyfill removed from production by default added to jit builds Router improvements Enforcing only one navigation at a time Implementing the SwitchMap
19. QUESTIONS? QUESTIONS?
20. Presented by Jason Ruhlin, Manager Capital One Twitter: @softengjason Github: https://github.com/jsonRUHLS jsonruhls@gmail.com THANK YOU! THANK YOU!