View Transitions API in Angular 17
🚀 Version 17 of Angular is just around the corner, and it will include something that is making waves in the web development world… Continue reading on ngconf »
Uncategorized
How to use the new Mat-Slider
Angular Material Fundamentals In this post, I’m going to talk about one of Angular Material’s components, which was rewritten to be more in line with Google’s Material Design Specification for Web Components (MDC). Installing Angular Material Angular Material is a component library for Angular projects, this library comprises a number of User Interface components (UI) and …
Developing Angular Components with Cypress Component Tests
tldr; Developing UI components for our apps can be difficult. They require different inputs, or you may have to fill out a long form to see it, or have specific data come back from the API to see the component. But using a tool like Cypress’s component tests can simplify it by isolating the UI …
Developing Angular Components with Cypress Component Tests Read More »
Jenga Debugging
Jenga Debugging Photo by Valery Fedotov on Unsplash Have you ever played Jenga? It’s a child’s game, that’s still actually pretty enjoyable as an adult. It’s how some of us learned a few basics of engineering and physics before we could even sing the alphabet. I’m going to tell you about an unorthodox way of debugging …
Fassade Pattern in NgRx
Dieser Artikel behandelt das Fassaden Pattern in NgRx. Der Autor setzt voraus, dass ein entsprechendes Grundwissen im Umgang mit NgRx vorhanden ist. Die Fassade entkoppelt NgRx von unserer Anwendung. Dabei werden Selektoren als Properties vom Typ Observable angeboten. Die Actions werden zu normalen Methoden. Eine Videoversion gibt es hier: https://youtu.be/K4dpVXuhm14 Theorie Die Fassade ist ein …
NgRx Facade Pattern
NgRx Facade Pattern This article covers the Facade pattern in NgRx. The reader must have a basic understanding of NgRx or a similar state management library. The Facade pattern decouples NgRx from the rest of our application. It does that by masking NgRx-actions as method calls and the selectors as properties of type Observable. In case …
Function calls inside template are dangerous!
The other day, one of my coworkers detected a strange behavior inside our application. When he added RouterLinkActive to a link, the application stopped rendering. However when the directive was removed, the application worked correctly. Instead of immediately reading the solution, I created a challenge inside AngularChallenges for those who want to try resolving and …
New input binding for NgComponentOutlet
In Angular, you can create dynamic components using the NgComponentOutlet directive. However when your component has inputs, it was cumbersome to pass them through. In version 16.2.0-next.4, a new feature has been introduced, allowing you to bind your inputs much more easily. In this article, we will explore how to achieve input binding in previous versions …
Modifiable Source of Optimized Images in Angular 16.2
Northern coastline of Mallorca, Spain — Photo by author Since the release of the NgOptimizedImage directive two major versions ago in Angular 14.2 (recently backported to version 13.4), front-end developers have been able to reuse Angular logic to render images in the browser performantly. This built-in directive addresses some frequently overlooked best practices in image rendering, such as …
Modifiable Source of Optimized Images in Angular 16.2 Read More »
Modificando la fuente de imágenes optimizadas con Angular 16.2
Costa norte de Mallorca, España — Foto del autor Desde el lanzamiento de la directiva NgOptimizedImage en Angular 14.2 (e incorporada recientemente de forma retroactiva a la versión 13.4), los desarrolladores front-end hemos podido reutilizar lógica de Angular para la representación de imágenes en un navegador web de manera eficiente. Esta nueva directiva incorporada al framework promueve algunas …
Modificando la fuente de imágenes optimizadas con Angular 16.2 Read More »