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
andafterNextRender
- 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 @Input
s 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!
Top comments (0)