Uncategorized

Is your enterprise Angular application accessible? — Better it is, before June 2025. Open AI Dall-e-2 generated scene image If your enterprise application is not compliant with the Web Content Accessibility Guidelines (WCAG), your company might be sued with serious penalties that may reach 250k EUR, depending on the business and the country. In France, for example, the government …

Is your enterprise Angular application accessible? — Better it’s, before June 2025. Read More »

TanStack Query is a powerful data synchronization library that enables efficient handling of server state in web applications. It’s widely used in React applications, but lately it has been making noise in Angular since it is a library that can provide a lot of functionality out of the box to handle all the server state …

TanStack Query in Angular Read More »

Cómo la directiva NgOptimizedImage calibra las imágenes para ser representadas eficientemente En el ámbito del desarrollo web, optimizar las imágenes para una adecuada representación visual es crucial. Este artículo resalta los ajustes que efectúa la directiva NgOptimizedImage, esa característica del framework de Angular que permite de manera sencilla comunicar a los navegadores cuáles imágenes priorizar …

Ajustes automáticos en las imágenes optimizadas por Angular Read More »

How the NgOptimizedImage directive streamlines image rendering performance In the realm of web development, optimizing images for appropriate rendering is crucial. This article highlights the built-in performance adjustments offered by the NgOptimizedImage directive, a powerful feature within the Angular framework that seamlessly enables browsers to anticipate which images to prioritize or defer, assists in responsive …

Automatic Adjustments in Angular’s Optimized Images Read More »

This article explains how to test Signal and Model Inputs, which are the input() and the model() functions. Signal Inputs Signal Inputs arrived in Angular 17.1. They fulfill the same tasks as the @Input decorator: Property Binding. A Signal Input is a simple function named input(). The new Property Binding syntax looks like this: // @Input-Style …

How do I test Signal & Model Inputs? Read More »

Signals as lightweight “reactive primitive” will shape the future of Angular applications. At the time of this writing, signal() and computed() are stable, and effect() is in developer preview. Developer preview doesn’t mean we have an unstable feature but that the Angular team can introduce breaking changes within a major version. The feature is stable; …

How do I test Signals (signal, computed, effect)? Read More »

Historically, creating a test involving the routing context without mocking it has been challenging. This is mainly due to less-than-optimal documentation on RouterTestingModule or provideLocationMock. In the meantime, some community projects, especially Spectacular from Lars Nielsen, have helped us out. Spectacular by ngworkers | Spectacular This article explains how to use the RouterTestingHarness to write sound …

How do I test using the RouterTestingHarness? Read More »

This article discusses testing Angular code, which uses the inject function for dependency injection. If you are more of a visual learner, here’s a video for you: https://medium.com/media/e1f4a05a89392e4ab835000ea9d9e832/href Why inject()? The inject function, introduced in Angular 14, is an alternative to the constructor-based dependency injection. inject has the following advantages: 1. Standardization of Decorators Decorators have …

How do I test code using inject()? Read More »

If you prefer the kind of tests that minimize mocking as much as possible, you will be pretty happy with Standalone Components. Gone are the struggles of meticulously picking dependencies from NgModules for your Component under test. Standalone Components come self-contained. Add them to your TestingModule’s imports property, and all their “visual elements” — Components, Directives, Pipes, and …

How do I test and mock Standalone Components? Read More »

In this article, we will go through some tips for setting up and optimizing StoryBook for Angular applications that go from things that only make sense for Angular, like adding a shared module, to more non-framework-specific things, like adding useful add-ons. Add a folder for other documentation StoryBook comes with a set of example stories, but …

StoryBook setup tips for Angular applications Read More »