Photo by Christopher Gower on Unsplash This is a guest post by Mohammad Rajpura. If you enjoy it, let us know in the comments so Mohammad can contribute more often to this blog. For many developers, unit testing can feel like a tedious chore. But it doesn’t have to be! When done right, writing tests can be both beneficial and even enjoyable. In this guide, we’ll walk you through unit testing for Angular components in a simple, stress-free way. Let’s transform testing from a hassle into a helpful tool! Why Unit Test Your Angular Components? Your code is protected by unit testing ..read more

Sometimes, the best parts of the Angular framework are the ones that aren’t even documented. You try something out, and it works beautifully, almost better than expected. For instance, I was wondering if I could use ngModel with signals. Would the 2-way data-binding work that way? So I did this: @Component({ selector: 'app-root', imports: [FormsModule], template: ` <h1>Hello from {{ name() }}!</h1> <input type="text" [(ngModel)]="name" /> `,})export class App { name = signal('Angular');} And it works! We can use a Signal reference with ngModel, and the ..read more

A few days ago, I was teaching Angular, and people asked me why I was doing this with my signals inside Angular services: readonly data = signal('value').asReadonly(); Why am I using read-only twice? Isn’t this redundant? First, let’s say I only do this: export class DataService { data = signal('value').asReadonly();} Other components can inject that service, and the following is prevented, which is good if we want to ensure components can’t change the value of a Signal: export class AppComponent { data = inject(DataService).data; constructor() { // This doesn't co ..read more

Since version 16, Angular has been all about signals. I’ve covered how to create Signals from Observables to transition away from RxJs, but the Angular team introduced an even better option with Angular 19: The resource API. This API is experimental for now, as shown in the official documentation. This means it’s not recommended for production yet, but it’s such an exciting development that I had to write a tutorial on that topic anyway: What problem are we solving here? Observables are used in many places in Angular, especially the HttpClient. Using Signals around these Observ ..read more

Tutorial — How to use a proxy to prevent CORS issues with Angular? A proxy forwarding an HTTP request to avoid CORS issues, as generated by AI If you've ever encountered CORS errors in your Angular apps, this tutorial is for you! What is CORS? CORS stands for Cross-Origin Resource Sharing. It's a security mechanism that allows web browsers to make controlled requests to resources on a domain different from the one serving the web page. This means if you're serving your app on a domain "example.com" or "localhost" and your web app makes requests to "google.com" or some ..read more

A few years ago, I published a tutorial on how to do polling with RxJs and Angular. The goal was to illustrate how to retrieve and render information that gets refreshed periodically. With the latest iterations of Angular, we can simplify that approach a lot and implement a similar feature with less code, better performance, and no risk of memory leak! And we’ll be using Signals, too! First, let’s take a look at the 2020 version of my polling example: @Injectable()export class CurrencyService implements OnDestroy { private allCurrencies$: Observable<CurrencyInfo[]>; p ..read more

AI-generated image from the prompt “create signals out of observables” Signals are becoming increasingly an alternative to RxJs in Angular applications. Of course, there are the toSignal and toObservable functions to implement interoperability between Angular Signals and RxJs Observables, but what if we want to get more features than the basics? For instance, say we’d like to know if an Observable is still loading its initial data or if an error happened. Wouldn’t it be great to be able to do something like this? @if( myData.loading() ) { Loading data...} @else { {{ myData.data ..read more

RxJs is the most challenging library of the Angular ecosystem because of its syntax, numerous operators, and the asynchronous mindset associated with Observables. Today, let’s see the easiest way to debug RxJs code in Angular. Now, you’ve probably done something like this at least once: service.getSomeObservable().subscribe(data => { console.log(data);}); While the above works, it’s not ideal for a bunch of reasons: It forces you to subscribe to an Observable instead of using the async pipe, which is much better. It doesn’t allow you to debug what happens in that Observa ..read more

Have you ever tried examining the size of an entire Angular project and comparing it to the size of the code compiled by Angular (its build output in the dist folder)? The difference is almost hard to believe. Typically, the entire project folder of an Angular app is well above 600MB, which includes a lot of things, including your code, all your dependencies, but also the Angular CLI, the TypeScript compiler, and more: After running ng build, your dist folder is much smaller than 600MB, usually just a few KB or MB, depending on the size of your application. This is because of a tec ..read more

I've heard this question several times over the past few weeks, so I'm writing a blog post about it. At first, I saw this question as similar to asking someone, "What is your favorite color?" because I believe that every single person/dev team has their own opinions and preferences. That said, I realized people ask that question because of possible misconceptions about how Angular works, making this topic much more interesting. Also, we're lucky enough to have an official Angular style guide to help us make informed decisions about it. Here is my take on that topic in a Q&A form ..read more