Eyas's Blog

Occasional musings on software development, tech, the Middle East, and anything else.

Angular Archives

Use trackBy in Angular ngFor Loops and MatTables

A missing trackBy in an ngFor block or a data table can often result in hard-to-track and seemingly glitchy behaviors in your web app. Today, I'll discuss the signs that you need to use trackBy . But first—some context: More often than not, you'll want to render some repeated element in Angular. You'll see code that looks like this: In cases where the ngFor is looping over the results of a…

Read more →


About those Side-effects in Observables, an Angular Use Case

When testing a codebase in Angular Ivy, I ran into a bunch of test failures I wasn't seeing before. ExpressionChangedAfterItHasBeenCheckedError s were being thrown around. In debugging these failures, I found that many of them are the results of side-effects in Observables and Observable pipe operations. I happened to describe these earlier in my piece on Observables, Side-effects, and…

Read more →


Data and Page Content Refresh patterns in Angular

Part of why I recommend using RxJS Observable s all the way through in Angular TypeScript code, and only unpacking them at the closest point to where the UI is declared (often using the | async pipe) , is because it makes other transformations on an Observable available and convenient. Two such examples include retry and refresh logic. Two common reasons to reload/refresh data being displayed…

Read more →


Use AsyncPipe When Possible

I typically review a fair amount of Angular code at work. One thing I typically encourage is using plain Observable s in an Angular Component, and using AsyncPipe ( foo | async ) from the template html to handle subscription, rather than directly subscribing to an observable in a component TS file. Subscribing in Components Unless you know a subscription you're starting in a component is very…

Read more →


1