Passare dati tra componenti con i service in Angular

In questo articolo vediamo come passare dei dati tra componenti in Angular usando dei service.

Simuleremo il classico counter del carrello.

Ma faccio la solita premessa che si tratta di un esempio basico iniziale.

Cominciamo con la creazione del service:

import {Injectable} from '@angular/core';
import {Observable, ReplaySubject} from "rxjs";

@Injectable({
  providedIn: 'root'
})

export class CarrelloService {
  private counter: ReplaySubject<number> = new ReplaySubject<number>(1);

  incrementCounter(cnt: number): void {
    this.counter.next(cnt);
  }

  getCounter(): Observable<number> {
    return this.counter.asObservable();
  }

}

Adesso nel nostro componente abbiamo questo:

import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {TopbarComponent} from "./topbar/topbar.component";
import {CarrelloService} from "./carrello.service";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, TopbarComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {

  constructor(private carrelloService: CarrelloService) {
  }

  aggiungiAlCarrello(): void {
    const counter = 13;
    this.carrelloService.incrementCounter(counter);
  }

}

Con questo HTML:

<app-topbar></app-topbar>

<div>
  <button type="button" (click)="aggiungiAlCarrello()">Aggiungi al carrello</button>
</div>

La app-topbar dobbiamo ancora crearla; simulerà la topbar con il counter del carrelo.

Questo il componente:

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subject, takeUntil} from "rxjs";
import {CarrelloService} from "../carrello.service";

@Component({
  selector: 'app-topbar',
  standalone: true,
  imports: [],
  templateUrl: './topbar.component.html',
  styleUrl: './topbar.component.css'
})

export class TopbarComponent implements OnInit, OnDestroy {
  receivedCounter: number;
  private unsubscribe = new Subject<void>();

  constructor(private carrelloService: CarrelloService) {
  }

  ngOnInit(): void {
    this.carrelloService.getCounter()
        .pipe(takeUntil(this.unsubscribe))
        .subscribe(cnt => {
          this.receivedCounter = cnt;
        });
  }

  ngOnDestroy() {
    this.unsubscribe.next();
    this.unsubscribe.complete();
  }

}

E questo l'HTML:

<div>
  <span>Carrello {{receivedCounter}}</span>
</div>

Ovviamente questo setta un valore fisso, 13.

Come compito vi lascio quellodi renderlo dinamico.

Ci sono diverse strategie, tra cui l'uso del localStorage/sessioStorage nel caso in vui vogliate lasciare il carrello memorizzzato.

Enjoy!