State of Angular: Angular 14 Features and Beyond

Slide 1

Slide 1 text

Angular 14 Features and Beyond State of Angular

Slide 2

Slide 2 text

About Me Software Engineer, Typescript aficionado @mwycliffe_dev This is Learning @Thisis_Learning Author of the All Things Typescript Newsletter - allthingstypescript.dev Maina Wycliffe

Slide 3

Slide 3 text

- Standalone Components - Strictly Typed Forms - Page Title Accessibility - Extended developer diagnostics - Other Features & Improvements - Angular CLI Improvements Angular 14 Features

Slide 4

Slide 4 text

Standalone Components

Slide 5

Slide 5 text

- Affects Components, Pipes, Directives - Components that can be used without NgModules - In developer preview - Standalone property for standalone components What’s changing

Slide 6

Slide 6 text

app.component.ts @Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], imports: [RouterModule, CommonModule], }) export class AppComponent {} Indicates a component is a Standalone component

Slide 7

Slide 7 text

date-time.pipe.ts @Pipe({ name: 'dateTime', standalone: true, }) export class DateTimePipe implements PipeTransform { transform(value: unknown, ...args: unknown[]): string | null { // ... } } Indicates a pipe is a Standalone pipe

Slide 8

Slide 8 text

complete-strike-through.directive.ts @Directive({ selector: '[appCompleteStrikeThrough]', standalone: true }) export class CompleteStrikeThroughDirective implements OnInit, OnChanges { // ... } Indicates a directive is a Standalone component

Slide 9

Slide 9 text

Using Standalone Components

Slide 10

Slide 10 text

Lazy Loading Use loadComponent property to lazy load a component instead of loadChildren

Slide 11

Slide 11 text

What’s next? - NgModules are not going anywhere - You can use a combination of both

Slide 12

Slide 12 text

Standalone Angular WebApp Demo bit.ly/3aFzs5f

Slide 13

Slide 13 text

Strictly Typed Forms

Slide 14

Slide 14 text

Strictly Typed Forms - Top requested feature - Ensure values are typesafe - New UntypedFormGroup - Automated Untyped Forms Migration - Incremental Migration

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Page Title Accessibility

Slide 17

Slide 17 text

Page Title Accessibility - Title property of Route - Set page titles on the routes - You can providing a custom TitleStrategy for complex use cases

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Using Title Strategy

Slide 20

Slide 20 text

Extended developer diagnostics

Slide 21

Slide 21 text

Extended developer diagnostics - More insight and Improvement Suggestions into your templates - Precise, Actionable compile time suggestions - Catch bugs during compile time - Catch nullish coalescing on non-nullable values

Slide 22

Slide 22 text

Other Features & Improvements

Slide 23

Slide 23 text

Other Features & Improvements - Tree-shakeable error messages - use codes instead of long string error messages - Support for Typescript 4.7 - ES2020 output by default - Ability to Bind to to protected component properties - Angular DevTools - Works Offline and is Available on Firefox - Experimental ESM Application Builds

Slide 24

Slide 24 text

Angular CLI Improvements

Slide 25

Slide 25 text

Angular CLI Improvements - ng completion - CLI Autocompletion - ng analytics - control analytics settings - ng cache - manage cache

Slide 26

Slide 26 text

What’s in the Roadmap

Slide 27

Slide 27 text

What’s in the Roadmap - Improvements on Standalone Components - Improve image performance - Explore hydration and server-side rendering usability improvements - Modern CSS Features - And many others

Slide 28

Slide 28 text

Thank you! Software Engineer @mwycliffe_dev mainawycliffe.dev mainawycliffe Maina Wycliffe