Fabio Biondi

#ESLint statically analyzes your code to quickly find problems and notify warnings or errors.

It's already configured if you're creating projects with VITE or can be manually installed in #Angular application by using the npm package "angular-eslint".

Here some tips : )

Here you can find a summary of some of the latest features introduced in the new #Angular Signal Forms.

On my website you can download the PDF version, watch a video tutorial (italian but also translated in Eng) and more snippets about Signal Forms

lbdo.ing/signals-forms

@angular.dev

Here the second part of my post about #angular CLI commands I often use

In this post (1/2), I summarized some of the most useful CLI tools for #Angular (that I use very often).
Slides are updated to Angular v.19 and Zoneless.

Ultimo weekend per acquistare il nuovissimo video corso MASTERING #ANGULAR COMPONENTS al prezzo di lancio

LINK AL CORSO:
lbdo.ing/amc

Do you want to be sure your #Angular components are ready to use the latest change detection mechanism and for next-generation Zoneless applications?

Set the "ChangeDetectionStrategy.onPush" and if they don't work there are two main problems:

Today: probably too many renders
Tomorrow: No Zoneless

There are several approaches to including style sheets in #Angular components, some of which are only available in the most recent versions of the framework:

1️⃣ Inline styles
2️⃣ Inline styles (array)
3️⃣4️⃣ External CSS file (single or array)

I can’t wait for it to happen but at the moment the strategy has not been decided.
PS: this slide is just the first one of N slides about @Component decorator property that I will share in the next days : )

#Angular allows us to decide precisely where and how our components can be integrated.
Here are some types of key selectors that every Angular developer should know

In November 2024 was announced a "soft deprecation" of the #Angular directives "ngClass" and "ngStyle", mainly due to performance-related problems, in favor of a direct binding to the attributes "class" and "style".

More info:
github.com/angular/angu...

A super gift for all of you 👇🎄
A COUPON for 2 DAYS of FREE subscription to "unlock" our new books:

➡️ TypeScript for FrontEnd Developers (with React)
lbdo.ing/ts-book

➡️ Angular & NGRX 19:
lbdo.ing/ngrx

Simply click on the link below 👇 to activate them (max 100):
www.learnbydo.ing/coupons/rede...

🚀 Conditional Types in #React components🚀
An example to show how #TypeScript conditional types can be used to create a Button that can accept different properties based on a "variant" property.

In this scenario we could also use a Discriminated Union to achieve the same result (but more readable)

No, any error also because we run linter before the commit

#nextjs #performance #tip
We reduced build time by 30% by removing the default NextJS linter from the build.

In next.config file:

const nextConfig = {
eslint: {
ignoreDuringBuilds: true,
},
....

PS: I know some of you may not like this approach...
Solution? Don’t do it :)

An example of how #TypeScript can help us create more robust code.
Here, we use a "Union type" to type the properties of a #React component and handle different Notifications

Each branch of the JSX template will show only the right properties:

lbdo.ing/ts-book

#typescript
Working on the new landing page of my next online book about TypeScript (with React v.19 examples too).

lbdo.ing/ts-book

Any feedback is appreciated

SSR in #angular is getting better and better.
In v.19 it is very easy to define which route should be managed on the Client side, which server side (SSR) and which using the prerendering (SSG).

How cool is the new resoure API available in #Angular v.19?

In this snippet we use rxResource, #rxjs and the forkJoin operator to handle multiple requests.

Each time we change the "userId" signal, two http calls will be made:
1. users/[id]: user's info
2. posts?userId=[id]: users' posts

A new post about "resource" API ( #Angular v.19)

In this example we specify that the request is linked to the "userId" signal.

When the signal is updated, the endpoint is automatically re-fetched.
Since the url is composed by API/[id], the endpoint loads a different user at each call.

#angular v19
In this example we create the "userResource" property using the new "resource" API (available in Angular v.19).

This example is very similar to the one I shared yesterday but this time we use async...await instead.
"resouce" also offers a convenient "reload" method to re-fetch

#Angular v.19 introduces a new resource API:

• it allows to easily handle asynchronous operations, using Promises or Observables

• it manages its state, as the `isLoading()` property

• it can depend on a signal and automatically re-fetch data when it changes

Here an example (more coming soon)

I have just create a bluesky account and it really looks like twitter / X... 🤔