State of Angular: Angular 14 Features and Beyond

This is a look at the current state of Angular, features in the latest version of Angular - v14, and what features are in the roadmap for the future of Angular.

Transcript

1. Angular 14 Features and Beyond State of Angular
2. About Me Software Engineer, Typescript aficionado @mwycliffe_dev This is Learning @Thisis_Learning Author of the All Things Typescript Newsletter - allthingstypescript.dev Maina Wycliffe
3. - Standalone Components - Strictly Typed Forms - Page Title Accessibility - Extended developer diagnostics - Other Features & Improvements - Angular CLI Improvements Angular 14 Features
4. Standalone Components
5. - Affects Components, Pipes, Directives - Components that can be used without NgModules - In developer preview - Standalone property for standalone components What’s changing
6. 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
7. 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
8. complete-strike-through.directive.ts @Directive({ selector: '[appCompleteStrikeThrough]', standalone: true }) export class CompleteStrikeThroughDirective implements OnInit, OnChanges { // ... } Indicates a directive is a Standalone component
9. Using Standalone Components
10. Lazy Loading Use loadComponent property to lazy load a component instead of loadChildren
11. What’s next? - NgModules are not going anywhere - You can use a combination of both
12. Standalone Angular WebApp Demo bit.ly/3aFzs5f
13. Strictly Typed Forms
14. Strictly Typed Forms - Top requested feature - Ensure values are typesafe - New UntypedFormGroup - Automated Untyped Forms Migration - Incremental Migration
16. Page Title Accessibility
17. Page Title Accessibility - Title property of Route - Set page titles on the routes - You can providing a custom TitleStrategy for complex use cases
19. Using Title Strategy
20. Extended developer diagnostics
21. 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
22. Other Features & Improvements
23. 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
24. Angular CLI Improvements
25. Angular CLI Improvements - ng completion - CLI Autocompletion - ng analytics - control analytics settings - ng cache - manage cache
26. What’s in the Roadmap
27. 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
28. Thank you! Software Engineer @mwycliffe_dev mainawycliffe.dev mainawycliffe Maina Wycliffe