Master Angular 16.1 & 16.2

Since I published my Master Angular 16 Study guide, the Angular team released two minor versions: Angular 16.1 and 16.2.

🎯Changes and new features

In this article, I list out the most important changes and new features, also share resources that will teach you how these new Angular features work:

• Transform functions for the @Inputs decorators
• New lifecycle hooks: afterRender and afterNextRender
• Component input binding support for NgComponentOutlet
• TypeScript 5.1 support
• Experimental fetch backend support

📌Transform functions for the @Inputs decorators

Official docs: Input

PR: feat(core): add ability to transform input values

Angular supports transform functions for the @Inputs decorators of the components. Enea Jahollari explains through examples how these transformations work.

Gaurav Mukherjee shows us how to use input transforms to get signal-based inputs in a component: "How to enjoy signal-based input right now!"

📌New lifecycle hooks: afterRender and afterNextRender

Official docs: afterRender, afterNextRender

PR: feat(core): add afterRender and afterNextRender

afterNextRender invoked the next time the application finishes rendering, it's useful for example initializing a non-Angular library. It runs on the browser platform only.

afterRender is invoked each time the application finishes rendering, so we can manually change the DOM after every change detection run.

Connie Leung wrote a tutorial to demonstrate how these new hooks work, integrating an Angular app with the Chart.js library: "DOM reading and writing with new lifecycle hooks in Angular"

📌Component input binding support for NgComponentOutlet

Official docs: NgComponentOutlet

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

With this improvement, we can more easily pass @Inputs to dynamic components created by NgComponentOutlet. Thomas Laforge explains in his article how this new feature works.

📌TypeScript 5.1 support

PR: feat(core): support TypeScript 5.1

Daniel Rosenwasser highlighted the most interesting new features in his announcement:

• Easier Implicit Returns for undefined-Returning Functions
• Unrelated Types for Getters and Setters
• Decoupled Type-Checking Between JSX Elements and JSX Tag Types
• Namespaced JSX Attributes
• typeRoots Are Consulted In Module Resolution
• Linked Cursors for JSX Tags
• Snippet Completions for @param JSDoc Tags
• Optimizations
• There are also some breaking changes

📌Experimental fetch backend support

Official docs: provideHttpClient

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

This is a developer preview feature, you can try it out by providing provideHttpClient(withFetch()):

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

👨‍💻About the author

My name is Gergely Szerovay, I work as a frontend development chapter lead. Teaching (and learning) Angular is one of my passions. I consume content related to Angular on a daily basis — articles, podcasts, conference talks, you name it.

I created the Angular Addict Newsletter so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered.

Next to the newsletter, I also have a publication called — you guessed it — Angular Addicts. It is a collection of the resources I find most informative and interesting. Let me know if you would like to be included as a writer.

Let’s learn Angular together! Subscribe here 🔥

Follow me on Substack, Medium, Dev.to, Twitter or LinkedIn to learn more about Angular!