I was wondering about a straightforward method to handle application state using Angular 18’s built-in features. Would starting with a simple service utilizing dependency injection (DI) be a good approach?

Being new to Angular 18, I find myself a bit perplexed about managing state simply within Angular. Previous experiences with other frontend libraries often advocate for commencing with basic state management using built in functionalities (similar to useState and context in the React ecosystem).

In the Angular realm, there seems to be a reliance on RxJS even for uncomplicated state management solutions.

I created a tiny demonstration using Angular services and dependency injection: Stackblitz.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class StoreService {
  state = {
    name: '????',
  };

  getState() {
    return this.state;
  }

  setState(state: { name: string }) {
    this.state = state;
  }
}

It covers basic things like giving components access to a global state object. However, is this approach viable? What are the drawbacks compared to using RxJS?