RainerHahnekamp Modern Angular Rainer Hahnekamp 21. May 2024

RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io ● Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp

RainerHahnekamp The Goal

RainerHahnekamp

RainerHahnekamp Agenda ● Standalone Components ● Standalone API ● Functional Interceptors and Guards ● Template Blocks ● SSR ● Signals ● New API

RainerHahnekamp Standalone Components ● Easier ● Good for Non-Mocking Tests ● Exclusive Features (@defer, Host Directives) ● No Impact on Bundle Size or Performance ● Future Version require {standalone: false}

RainerHahnekamp Standalone API ● Separation of Services and Components ● Better Tree-Shakability ● provideHttpClient ● provideRouter & lazy Routes

RainerHahnekamp inject ● Pros ○ DI in functions ○ Independent of Decorator Standardization ○ Type at Runtime available ○ Easier Inheritance ○ Type-Safe Injection Tokens ● Cons ○ Requires TestBed ○ Two Ways on how to things

RainerHahnekamp Functional HttpInterceptors & RouterGuards ● Functions ● Simpler ● Guard Class deprecated ● Only work with inject()

RainerHahnekamp Template Blocks (@if, @for, @switch) ● Replaces Structural Directives for Control Flow ● Better Options ○ if/else if/else ○ tracking ● Zoneless ● Execute during Compilation ● Better DX ● More to come… ○ @defer ○ @let (18.1)

RainerHahnekamp Signals ● Optimized for Frontend ● Reactive Alternative to RxJs ● Manages State ● Simple ○ signal: writable ○ computed: read-only & derived ○ effect: side effects ● Improved DX ● Local Change Detection (v17) ● Triggers Change Detection(v18)

RainerHahnekamp Signal-based API ● input() ● model() ● viewChild() & contentChild() ● output() (doesn't return a Signal)

RainerHahnekamp SSR & Hydration ● Cooperation with Wiz ● Important for Internet-facing apps ● Evolution ○ Destructive Hydration (Community-based) ○ Default Hydration ○ Partial Hydration (@defer-based) ● Challenges ○ User-based Context ○ Asynchronous Tasks ○ DOM Access