Subscribing to observable or reading data directly from observable?

Question

We are currently building a large software system with Angular 12. I was wondering which direction to take concerning best practices for working with observable data.

The problem

We have a lot of user data to read and manipulate in the software, which gets used in a lot of routes as well.

In The first approach you would create a local object of your data and go further from there. The observable is private.

In The second approach you directly work on the current value of the Observable. The observable is public.

It is not only the initialization and the use in the HTML template. But also manipulating like sorting order, removing and adding values. In my first impressions the second approach is more reliable, preventing double values in my observable, etc. Also, this way I do not have to subscribe on every page component to the different values. Which means less code.

The question

We need to decide as a team which approach to take throughout the software. What is considered the best-practice behavior in terms of structure and/or performance, and why?

First approach

The approach I was using at first was to subscribe to my observable data like this:

export class FavoritesComponent implements OnInit {
  favorites: Favorite[] = this.userService.userFavorites$.value;
  constructor(
    private userService: UserService,
  ) {

    // Subscribe to the favorites
    this.userService.userFavorites$.subscribe((favorites: Favorite[]) => {
        this.favorites = favorites;
    });
  }

From here, all my manipulations are getting done in this.favorites. For example in my favorites.component.html:

<div *ngFor="let favorite of favorites">
    <app-favorite-card [favorite]="favorite"></app-favorite-card>
</div>

Manipulating items (change order):

...
const itemMove = this.favorites.splice(from, 1)[0];
this.favorites.splice(to, 0, itemMove);
this.userService.userFavorites$.next(this.favorites); // update the observable

Second approach

The second approach is to directly read and manipulate from/to the observable.

export class FavoritesComponent implements OnInit {
  constructor(
    public userService: UserService,
  ) {

  }

In my favorites.component.html:

<div *ngFor="let favorite of this.userService.userFavorites$.value">
    <app-favorite-card [favorite]="favorite"></app-favorite-card>
</div>