What's new with Angular 17

The New Features of Angular 17

Transcript

1. Dany Paredes (he/him) Angular GDE / Senior Frontend Innoit Angular 17 Angular renaissance “The Game Changer”
2. What version of Angular are you currently using in production? 😉
3. About Me Dany Paredes 🏀 NBA, 🏆🅰ngular GDE Technical Writer for Telerik Google Dev Library http://danywalls.com
4. The Starting Lineup: JavaScript's Early All-Stars
5. October, 2010 AngularJS two-way data binding, revolutionizing how web applications were built. Hi! 😉 The Early Days: AngularJS
6. September 2016 Angular 2 Complete rewrite from AngularJS, introducing a component-based architecture March 2017 Angular 4 Introducing HttpClient, a smaller, New router life cycle events for Guards and Resolvers. Nov 2017 & May 2019 Angular 5, 6, 7, 8 Angular in the Pre-React Era: Struggling to Hold Court
7. Revealing Strategies and Actions Leads to Others Learning and Benefiting Over Time 😒 The Turning Point
8. February 2020 Angular 9 Ivy AOT Type checking June 2020- November 2021 A10- A11-A12-A13 The Comeback: Angular's Evolution Through Community Insight
9. November 2022 Angular 15 Standalone Stable - Composition API Ng Optimized Image - Functional Guards May 2023 Angular 16 Signals (preview) Hydratation(preview) ESBuild Required Inputs The Comeback The Comeback: Angular's Evolution Through Community Insight June 2022 A14 Standalone Components (preview) Strict Typed Forms Angular Debug Extension
10. Angular hear the community feedback to make easy to learn and start.
11. Angular 17: The Game Changer
12. “ ” Angular is back with a vengeance By Fireship @youtube
13. Key Features of Angular 17 angular.dev Vite & esbuild DI Debugging Input Transform Built-In Control Flow Async Animations & View Transition API New Lifecycle Hooks Server Side Rendering Signals
14. angular.dev New home page to learn and play with Angular Vite & esbuild Vite and esbuild ready DI Debugging Angular DevTools for application hierarchy for Angular 17 Angular 17
15. Angular.dev
16. Angular.dev The Home for Angular Developer
17. Angular.dev Sandbox and Interactive Tutorials
18. Vite & esbuild
19. Vite & esbuild Fast!
20. DI Debugging
21. Input Transform Transfom input and build in transformation for booleanAttribute and numberAttribute Custom transforms need to be statically analyzable by the compiler. Built-In Control Flow New syntax @for, @if @else @switch No imports NgFor, NgIf, NgSwitch Async Animations & View Transition API Loads Angulars Animations lazily and reduces your initial bundle size by 60KB Angular 17
22. Input Transform
23. Input Transform
24. Input Transform No more [totalAccounts] and [isActive]
25. Angular Syntax
26. Angular Syntax
27. Built-In Control Flow
28. Built-In Control Flow
29. Async Animations & View Transition API
30. New Lifecycle Hooks afterNextRender & afterRender Server Side Rendering Angular 17 comes with Vite and esbuild ready Signals Signals comes stable version. Angular 17
31. New Lifecycle Hooks (preview)
32. Server Side Rendering
33. Signals
34. What Next ? angular.dev Preconnect Image Directive Testing Styles and StylesUrl defer Effect ( developer preview) Material 3 Server Side Rendering hydratation
35. Too much to learn ? 👀
36. Embrace The Community
37. Content & Resources
38. Thanks! 👍