Blueprint for Angular with Signals, Without State Management

This article will provide a concise approach using Angular 17 and signals.

Angular Architecture with signals and without store

As you might have already heard, the Angular team introduced signals into the stable version with Angular 17. However, there has been a lot of confusion about how to use them and what the benefits are.

Basically, we can now start with a similar logic as before. The only difference is that we would create a so-called feature_name-signal.store.ts.

Feature Signal Store

The newly created signal store would have the exact same structure as our current store, or as we would typically do the store. We should have flat data:

// Good practice

featureSignal = signal<FeatureStateType>({
  users: [
          {name: 'john', email: 'john@john.com', id: 1}, 
          {name: 'joe', email: 'joe@joe.com', id: 2}
         ],
  currentUserId: 2,
})

// Bad practice
featureSignal = signal<FeatureStateType>({
  users: [
          {name: 'john', email: 'john@john.com', id: 1}, 
          {name: 'joe', email: 'joe@joe.com', id: 2}
         ],
  currentUser: {name: 'joe', email: 'joe@joe.com', id: 2},
})

Then, you can create mutation methods, and other methods (such as mappers, helpers, calculations…), in your signal-store.service.ts

Tip:

Working with the signals is easy and straightforward. Signals aren’t here to replace RxJs, but RxJs should still be used for streams. However, the signal is the best tool for data communication and, furthermore, it helps us write zoneless components. Also, when you are using the effects, or have a computed signal, you can use the untrack method:

effect(() => {
  console.log(`You are reading `${untracked(book())}` and 
  your current page is ${(page)}`);
});

And don't forget to check the NgRx Signal Store that will help us on the big projects: https://www.youtube.com/watch?v=MsbPkJYrv68

Feature Facade Service

Then our feature facade service would have injected our signal-store.service and it will map and get the data for the component

Conclusion

This article provides a brief example of the state-of-the-art architecture that is already familiar to us, but with a replacement of the store or BehaviorSubject() with signals.