Master Angular 16.1 & 16.2
Tags: angular, typescript, javascript
Published: 2023-10-24 06:51:09

---
title: Master Angular 16.1 & 16.2
published: true
description: A study guide that helps you learn what’s new since the 16.0 version of Angular
tags: #angular #typescript #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvfq8hqnzyk2bq0v4zh3.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-10-23 20:47 +0000
canonical_url: https://www.angularaddicts.com/p/master-angular-16-1-and-16-2
---


Since I published my [Master Angular 16 Study guide](https://www.angularaddicts.com/p/master-angular-16), 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](https://next.angular.io/api/core/Input#transform)

PR: [feat(core): add ability to transform input values](https://github.com/angular/angular/pull/50420)

Angular supports transform functions for the `@Inputs` decorators of the components. [Enea Jahollari](https://twitter.com/Enea_Jahollari) explains through examples how these transformations work.   

[Gaurav Mukherjee](https://twitter.com/lifekefunde) shows us how to use input transforms to get signal-based inputs in a component: ["How to enjoy signal-based input right now!"](https://itnext.io/how-to-enjoy-signal-based-input-right-now-56efecaeee98)


### 📌New lifecycle hooks: `afterRender` and `afterNextRender`

Official docs: [afterRender](https://next.angular.io/api/core/afterRender), [afterNextRender](https://next.angular.io/api/core/afterNextRender)

PR: [feat(core): add afterRender and afterNextRender](https://github.com/angular/angular/pull/50607)

`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](https://twitter.com/connieleung404) wrote a tutorial to demonstrate how these new hooks work, integrating an Angular app with the [Chart.js](https://www.chartjs.org/) library: "[DOM reading and writing with new lifecycle hooks in Angular](https://dev.to/railsstudent/dom-reading-and-writing-with-new-lifecycle-hooks-in-angular-4n7e)"


### 📌Component input binding support for `NgComponentOutlet`

Official docs: [NgComponentOutlet](https://next.angular.io/api/common/NgComponentOutlet#syntax)

PR: [feat(common): add component input binding support for NgComponentOutlet](https://github.com/angular/angular/pull/50736)

With this improvement, we can more easily pass `@Input`s to dynamic components created by `NgComponentOutlet`. [Thomas Laforge](https://twitter.com/laforge_toma) explains [in his article](https://dev.to/this-is-angular/new-input-binding-for-ngcomponentoutlet-c0g) how this new feature works. 


### 📌TypeScript 5.1 support

PR: [feat(core): support TypeScript 5.1](https://github.com/angular/angular/pull/50156)

[Daniel Rosenwasser](https://twitter.com/drosenwasser) highlighted the most interesting new features in his [announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-5-1/):



* 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](https://next.angular.io/api/common/http/provideHttpClient)

PR: [feat(http): Introduction of the fetch Backend for the HttpClient](https://github.com/angular/angular/pull/50247)

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](https://www.linkedin.com/in/gergelyszerovay/), 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](https://angularaddicts.com/). 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](https://www.angularaddicts.com/) 🔥

Follow me on [Substack](https://www.angularaddicts.com/), [Medium](https://medium.com/@GergelySzerovay), [Dev.to](https://dev.to/gergelyszerovay), [Twitter](https://twitter.com/GergelySzerovay) or [LinkedIn](https://www.linkedin.com/in/gergelyszerovay/) to learn more about Angular!