Angular Addicts #10: New features in Angular 15.1, Unit testing tips, Tutorials & more

My favorite Angular resources of January, 2023

Feb 09, 2023

👋Hey fellow Angular Addict

📰This is the 10th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that got my attention. (You can read the first, second, third, fourth, fifth, sixth, seventh, eighth and ninth issue here.)

👨‍💻👩‍💻Also, we are hiring! Not at Angular Addicts :) Are you an experienced Angular developer from Austria, Germany or Hungary? Join our PAS-X Savvy team, contact me via angular@pasx-savvy.com or LinkedIn!

I collected the best Angular articles and videos of 2022 in a separate article, so if you are looking to develop your Angular skills or get up to speed with some of the newest solutions, check out these insightful pieces.

📰Mastering Angular Structural Directives

Robin Goetz shared an in-depth tutorial about structural directives. In his first article, he explains the internal working of structural directives and how they are rendered in the DOM. The second article focuses on the directive’s context .

📰Async pipe is not pure

In his article, Enea Jahollari creates his own async pipe implementation from scratch to help us understand how the async pipe works and interacts with Angular’s change detection.

🎞️High ROI Testing With Cypress Component Testing

In this podcast, Christian Lüdemann and Lars Gyrup Brink Nielsen talk about Cypress component testing and cover the following topics:

Motivation for integration-based testing vs. the testing pyramid
Cypress CT vs. Jest
Setup of Cypress CT
Best practices with Cypress CT
Test setup with SIFERS
CRUD test of a TODO app

📰Jest ESM — Total Guide To More Than 100% Faster Testing For Angular

In this tutorial Tomas Trajan explains how he speeds up their Angular Jest tests by switching to Jest ESM and how they troubleshooted the issues they had during the migration.

📰Angular ESLint Rules for Accessibility

Sandi Barr published a tutorial series about how to use ESLint rules to enforce accessibility in an Angular application. This is the third part of the series, it explains how the following ESLint rules work:

Alt Text
Elements Have Content
Label Has Associated Control
Table Scope
No Distracting Elements
Button Has Type

In the first two parts of his series he suggests using certain ESLint rules for keyboard accessibility and ARIA.

📰Angular and tRPC

Kevin Kreuzer implements a node.js-based backend and an Angular frontend using tRPC.

tRPC is a lightweight Remote Procedure Call framework, it allows you to build and consume fully typesafe APIs without schemas or code generation by reusing the backend’s type definition from the fronted.

📢Release announcements

📢 Angular 15.1.0 is out

Cédric Exbrayat covered the most interesting new features in his article.

Tom Smykowski also explains some of the new features.

📢Announcing TypeScript 5.0 Beta

Some of the changes:

new decorators standard
better support ESM projects in Node and bundlers
new ways for library authors to control generic inference
expanded JSDoc functionality
simplified configuration

📢Component Story Format 3 is here

Improvements include:

Spreadable story objects to easily extend stories
Default render functions for brevity
Automatic titles for convenience
Play functions for scripted interactions and tests
100% backwards compatible with CSF 2

📢PrimeNG 2023 Roadmap Announced!

The roadmap contains several new enhancements, like:

Unstyled Mode and Tailwind Support
Figma Plugin to generate themes automatically from their UI Kit
Drag Drop Utils
New PrimeBlocks
Migration of all application templates to Vite

💬 Tweets

Here is a collection of my favorite tweets from January, 2023:

Fabio Biondi @biondifabio

#angular #cheatsheet I am creating a cheatsheet for my students and here you can find the first two pages : ) • @angular Fundamentals • build-in directives • native events • template-driven forms • Server Side communication • Angular Router

Chau Tran @Nartc1410

#angular 15.1.0 Here's a quick look at Self-closing tags in 15.1.0 Little before and after.

Enea Jahollari 🅰 @Enea_Jahollari

Had to listen to width changes for an html element, and most of the content online shows that onresize only works on window, and we should use ResizeObserver for that. So, I created an Angular Directive 💎 that encapsulates that part, so I can re-use it where needed. #angular

Thomas 🅰️🇨🇵 @laforge_toma

Here is a small snippet to demonstrate to skeptical #Angular developers that deprecating the guard as a service in favor of the functional guard is the right decision. ✅better DX ✅less error-prone ✅more reusable ✅less boilerplate code ✅easier to read

🙋‍♂️Who is behind Angular Addicts?

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 Medium, Twitter or LinkedIn to learn more about Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Have you found or written an interesting Angular-related article, tweet or other resource lately? Please let me know here in the comments or send me a DM on Twitter! I might feature it in the next Angular Addicts issue!