Spot the bug: Angular

1import { Injectable, Component } from '@angular/core';
2import { BehaviorSubject } from 'rxjs';
3
4@Injectable({ providedIn: 'root' })
5export class CartService {
6  private itemsSubject = new BehaviorSubject<string[]>([]);
7  items$ = this.itemsSubject.asObservable();
8
9  add(item: string) {
10    this.itemsSubject.next([...this.itemsSubject.value, item]);
11  }
12}
13
14@Component({
15  selector: 'app-cart-badge',
16  template: `<span>{{ (items$ | async)?.length }}</span>`,
17  providers: [CartService],
18})
19export class CartBadgeComponent {
20  items$ = this.cart.items$;
21  constructor(private cart: CartService) {}
22}