My bookmarks and blogposts regarding Software Development in .NET, C#, Angular, JavaScript, CSS, Html
When facing a performance issue, the Profiler is perfect for identifying the problem’s root cause. For instance, it could highlight that one component is much slower than the others and gets refreshed for no good reason, indicating that a different change detection strategy is needed.
Source: Angular profiler for performance tuning | Angular Newsletter
Directives such as *ngIf and *ngFor will soon get deprecated to favor the new control flow blocks.
E.g. old directives:
<ng-container *ngIf="isLoggedIn">...</ng-container>
Can now be replaced with the new syntax:
@if (isLoggedIn) {
...
}
We often learn Angular presented with two options for working with forms: Template driven or reactive (or both!)
In several cases, small forms (for instance, a login screen, a single text input, or a single dropdown) don’t need that kind of verbosity.
In this post, we will look at five straightforward yet valuable features of the FormControl object used on its own without bringing any additional config to the table.
Source: 5 tips on using Angular FormControl | by Alain Chautard | Angular Training
Convert C# Models, ViewModels and DTOs into their TypeScript equivalents.
Source: C# to TypeScript – Visual Studio Marketplace
Everyone wants to write code in a fast bug-free way without thinking about its style most of the time. That’s why in this post I will talk about configuring ESLint and Prettier in an Angular project.
Source: Configure Prettier and ESLint with Angular | by Enea Jahollari | ITNEXT
This runs all spec files that are descendants of the “my-area” folder and in the “Edge” browser.
ng test --include "src/app/my-area/**/*.spec.ts" --browsers=Edge
run a single spec file:
ng test --include "src/app/myarea/**/mytest.component.spec.ts" --browsers=Edge
Angular v19 will make standalone: true the default for components, directives, and pipes.In v14 we introduced a developer preview “standalone” feature, which made it possible for the first time to build an application that didn’t rely on NgModules. Since then, standalone has been stabilized, and has become the recommended way to write Angular code by the Angular team. The CLI generates components with standalone: true by default, and the Angular docs teach standalone first to all new Angular developers. A
Validating user input in HTML forms can be a tedious task. In this new series, we’ll look at how Angular can help us implement painless form validation. First, it’s essential to know that Angular relies primarily on native browser validation features that use modern HTML properties. For instance, if a form field has to be filled out, you can mark it as required using the required HTML attribute
Source: Basic form validation with Angular | Angular Newsletter
In this tutorial, we’re going to implement a polling mechanism using RxJs and Angular. Our goal is to retrieve and render information that gets refreshed periodically. Our example is going to be a currency service that displays up-to-date currency exchange rates
Source: How to do polling with RxJs and Angular? | by Alain Chautard | Angular Training
Another way to put it is that you don’t want to end up doing something like this:
<p>First name: {{ (user$ | async)?.firstName }}</p>
<p>Last name: {{ (user$ | async)?.lastName }}</p>Code language: HTML, XML (xml)The above code is pretty hard to read and requires one subscription for each property. This alone can be a disaster, as each subscription might trigger an HTTP request for the same data from the server!
Instead, you can do something like this, which uses only one subscription, stores the result in a local variable, then renders the data when it’s available. This technique works with any structural directive, such as *ngIf or *ngFor:
<div *ngIf="user$ | async as user">
<p>First name: {{ user.firstName }}</p>
<p>Last name: {{ user.lastName }}</p>
</div>