Angular: Beyond the Fog #1

A weekly deep dive into complex Angular topics, covering Angular 20 features, dependency injection patterns, form handling approaches, and advanced component patterns

May 13, 2025

Welcome to "Angular: Beyond the Fog" - a weekly blog series where we dive deep into the complex and often unclear aspects of Angular development. In this series, we'll tackle questions and scenarios that even our Angular Docs AI assistant struggle to answer definitively. Each week, we'll explore real-world Angular challenges, provide detailed explanations, and share practical solutions that go beyond the surface-level documentation.

What’s new in Angular 20?

As the Angular 20 release is currently planned for 26th May week, the current official documentation is still based on Angular 19. Community content is also quite limited, and a decent amount of it is AI-generated content, providing unverified information.

I’m currently working on providing you with the most up-to-date information about Angular 20, with a dedicated dashboard: feature list, commit history, Can I Use focus, tutorials, and quizzes.

Version Insights

It’ll be publicly shared for the Angular 20 release date and will work at creating such content for all future Angular releases, even before they are released!

Why have I heard that constructor based DI may be replaced by the inject function?

The 2 solutions are currently supported, and there is no plan to replace one with the other.

However, part of the upcoming new official style guide is to recommend using the inject function, as explained in the style guide RFC summary.

I need a button component using TailwindCSS v4. Use the purple color

Tailwind is a great project, but unrelated to Angular. You can find the Tailwind color palettes here. You’ll have to choose the right value based on your design system and dark/light themes: there is no default ‘purple color’.

Is it best to use React or Angular?

Quoting Mark Thompson, Angular Devrel: build great web apps! And today, you can choose what you like best to create great web apps.

Besides different mindsets, the main difference is that Angular is a full framework with its own official ecosystem, while React is a library. That’s not about battling who is a framework or not, but by being a library, React enabled a lot of different ecosystems to grow around it, being both a blessing and a curse, leading to innovation but inconsistency between projects.

My only true recommendation would be to prefer React for mobile or SSR applications, as community projects (Expo for mobile and Next.js for SSR) are more mature and easier to set up.

Should I use ngModel or reactive form controls?

There are just different mindsets: you won’t be limited by choosing one over the other. The community was used to advocate for reactive forms, but lately, more people have been sharing the benefits of using template-driven forms with ngModel. A few years ago, Ward Bell gave a great talk about it: Prefer Template-Driven Forms .

The Angular team started making some experiments with the Signals API to provide a Signals Forms API, but it has not been unveiled yet. It’s not part of the upcoming v20.0.0 release. However, we could dream of an experimental version released in some minor v20 version.

I’d encourage you to choose an API and to stick with it for your project’s consistency.

How to use effect without a constructor?

You can create a local variable in your class Component to reference an effect, rather than using it in a constructor:

export class MyComponent {
  myEffect = effect(() => {
    console.log("effect");
  });
}

I’d still recommend using the constructor as a way to organize the code and make it more readable. As you won’t need this reference, it avoids creating some conflicts at naming local variables.

How to learn NgRx?

The Angular Docs AI assistant is not shaped to answer about community projects: like any other project, the best solution to get started is to explore the official library documentation.

Mind NgRx now offers three approaches to manage your app state:

@ngrx/store : the original project, inspired by Redux
@ngrx/component-store : to manage component state
@ngrx/signals : a new API to manage state with signals