In my last article, I explained how our communication with the backend takes place and how we were able to build a very simple caching mechanism thanks to signals. In this blog post, I would now like to demonstrate how we use the signals from our services within the components. Views As mentioned in the previous post, we have, broadly speaking, “Views” and “Actions” for displaying data from the backend. In the Views, primarily only data is presented, and in Actions, this...
After explaining in the last blog post what Angular Signals are and how they are used, I would like to delve into how we at calitime.ch handle Signals to keep our tool TimeRocket soaring through the cosmos in this article. We don’t use HTTPClient! First and foremost, I must start with a circumstance that may not be common for many teams using Angular: We do not use HttpClient (anymore).Normally, HttpClient is the preferred tool in Angular to make HTTP requests to a server. It returns...
What are Signals? On May 3, 2023, Angular 16 was released, introducing the possibility to use Signals. Signals are another way to implement the reactive programming paradigm in Angular. For quite some time, RXJS has been available for this purpose, and it doesn’t seem to be disappearing from the Angular world anytime soon. Generally, the current consensus is that RXJS should be used for more complex problem scenarios since it is more powerful but also harder to grasp. However, for simpler...
Yesterday, I found myself face-to-face with a rather peculiar phenomenon that managed to consume a good hour of my time. As is often the case, the solution turned out to be surprisingly simple. With the intention of documenting this for future reference (especially for my future self), I am writing this short blog post. What happened? A colleague of mine updated XUnit in our solution and merged it into our main branch. When I pulled the new code locally and tried to restore the NuGet packages...
A few days ago, we embarked on the process of tidying up a particularly complex piece of code. It involved moving typical frontend code to the backend, as it was becoming too cumbersome and we felt more secure writing it in F# in the backend. (more on that in another blog post) After much of it was rewritten, we ran into a pattern matching construct that threatened to contain a lot of code duplication. To increase readability, we wanted to use an Active Pattern. The problem was that the...
In June 2019, Microsoft introduced System.Text.Json as a feature of .NET (core) 3.0 to the public. The reason they gave for creating this new namespace was that they were unhappy with the old built-in solution for serializing / deserializing JSON. The poor built-in capabilities to work with JSONs –of course- was the reason for James Newton-King to create Json.Net (for many of us just called Newtonsoft, which actually is his company and not the name of the library). Newtonsoft’s Json.Net...
Today I learned something insanely useful for working with ngForm in Angular:ControlContainer!
A couple of weeks ago, one of my colleagues was tasked with implementing multiple customizable reports for our software. So, he did some research and found ActiveReportsJS by Grapecity. It allows us to create templates for reports, which could then be edited by our users to fully customize the appearance of those reports. Not only that, but it allows for PDF previewing on the one hand and headless exporting the PDFs on the other. To my surprise, the PDF rendering takes place in the...
This is part 3 of my series about Angular components.If you haven’t already, check out part 1 (one-way and two-way binding) and part 2 (ngModel) to see how and why to write an Angular component following the ngModel pattern.
Our goal for this part of the series is to learn how to validate your angular component’s user inputs to disable the submit of a form surrounding our form-control.
In my last article, I’ve explained how to use @Input() and @Output() and how to combine them to offer two-way binding for your component. This time I want to take this component to behave like a proper control within a <form>-element that is using ngForm. What’s ngModel, and why should I use it? In a typical Angular application, we often encounter scenarios where we have to handle forms with various input controls and a button to send data or perform some sort of action. The...