Eyas's Blog

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

Angular Archives

In Search of Better Loading and Error-handling in Angular

For many, Reactive programming seems like a conceptually elegant approach that falls apart the moment you try to do any serious programming. When adding essential error handling, refreshable state, etc. into an application, many folks see their codebases move further from the promise of clean, elegant reactive transforms. It doesn't have to be this way. While I've argued before for cleaner display…

Read more →


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…

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