Key Updates in Angular 16.1 & 16.2

After publishing my Master Angular 16 Study guide, the Angular team shipped two additional minor releases: 16.1 and 16.2. Below, I summarize the most notable additions and point to resources that explain how to use them.

Input Value Transformation

Official documentation: Input

Pull request: feat(core): add ability to transform input values

The @Input decorator now supports transform functions for component inputs. Enea Jahollari walks through practical examples of how these transforms behave.

Gaurav Mukherjee demonstrates how you can leverage input transforms to implement signal-based inputs immediately: "How to enjoy signal-based input right now!"

New Lifecycle Hooks: afterRender and afterNextRender

Official documentation: afterRender, afterNextRender

Pull request: feat(core): add afterRender and afterNextRender

The afterNextRender hook fires the next time rendering completes. It suits tasks like initializing a third-party, non-Angular library, and it only executes in the browser.

afterRender, by contrast, runs after every rendering cycle, which lets you manually touch the DOM after each change detection pass.

Connie Leung wrote a tutorial showing these hooks in action, connecting an Angular application to the Chart.js library: "DOM reading and writing with new lifecycle hooks in Angular"

Input Bindings for NgComponentOutlet

Official documentation: NgComponentOutlet

Pull request: feat(common): add component input binding support for NgComponentOutlet

This enhancement simplifies passing @Inputs to components instantiated dynamically via NgComponentOutlet. Thomas Laforge explains the details in his write-up.

TypeScript 5.1 Compatibility

Pull request: feat(core): support TypeScript 5.1

Daniel Rosenwasser called out the most compelling additions in his release announcement:

  • Simplified implicit returns for functions returning undefined
  • Independent types allowed for getters and setters
  • Type-checking for JSX elements and tag types now decoupled
  • JSX attributes can be namespaced
  • typeRoots participates in module resolution
  • Linked cursors for JSX tags
  • Snippet completions for @param JSDoc tags
  • Various optimizations
  • Several breaking changes are also included

Experimental fetch Backend

Official documentation: provideHttpClient

Pull request: feat(http): Introduction of the fetch Backend for the HttpClient

This feature is in developer preview. To experiment, supply provideHttpClient(withFetch()):

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withFetch()),
    // ...
  ],
}).catch((err) => console.error(err));
Enter fullscreen mode Exit fullscreen mode

About the Author

I'm Gergely Szerovay, a frontend development chapter lead. Deepening my understanding of Angular—and sharing it with others—is a constant pursuit. I read, watch, and listen to Angular-related material every day.

The Angular Addict Newsletter is my way of curating the best of what I encounter each month, for both seasoned developers and those just getting started.

There's also the Angular Addicts publication, where I gather the most useful content I find. If you'd like to contribute as a writer, let me know.

Let's keep learning Angular! Subscribe here 🔥

Find me on Substack, Medium, Dev.to, Twitter or LinkedIn.