Observable in Angular

Question

When I call the method calcolaDati() on elimina() it works normally, same in the constructors when I load the page for the first time, but if I call it on aggiungiCliente() the data is not updated. Can you explain me how it works?

list-component

import { Component } from '@angular/core';
import { Cliente } from '../models/Cliente';
import { ClienteService } from '../services/clienti.service';

@Component({
  selector: 'app-list-cliente',
  templateUrl: './list-cliente.component.html',
  styleUrls: ['./list-cliente.component.css']
})
export class ListClienteComponent {

  clienti: Cliente[];
  countMinorenni: number = 0;
  mediaEta: number = 0;

  constructor(private clientiService: ClienteService) {
    this.clienti = this.clientiService.getCliente();
    this.clientiService.clienteChanged.subscribe(nuoviClienti => this.clienti = nuoviClienti);
    this.calcolaDati();
  }

  onClickVisualizzaDettaglio(cliente: Cliente) {
    this.clientiService.selezionaDettaglio(cliente);
  }

  aggiungiCliente(nomeC: string, etaC: number, isMinorenneC: boolean) {
    this.clientiService.aggiungiCliente(nomeC,etaC,isMinorenneC);
  }

  elimina(id: number) {
    this.clientiService.elimina(id);
    this.calcolaDati();
  }

  calcolaDati() {
    this.countMinorenni = this.clientiService.contaMinorenni();
    this.mediaEta = this.clientiService.calcolaMediaEta();
  }
}

form-component

import { Component } from '@angular/core';
import { ClienteService } from '../services/clienti.service';

@Component({
  selector: 'app-form-cliente',
  templateUrl: './form-cliente.component.html',
  styleUrls: ['./form-cliente.component.css']
})
export class FormClienteComponent {

  nome: string = '';
  eta: number = 0;
  isMinorenne: boolean = false;

  constructor(private clientiService: ClienteService){  
  }
  
  onClickAggiungi()
  {
    this.clientiService.aggiungiCliente(this.nome, this.eta, this.isMinorenne);
  }

}

SERVICE

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { Cliente } from '../models/Cliente';

@Injectable({
  providedIn: 'root'
})
export class ClienteService {
 
  private dati: Cliente[] = [
    {
        id: 1,
        nome: 'Mario',
        eta: 25,
        isMinorenne: false
    },
    {
        id: 2,
        nome: 'Luigi',
        eta: 15,
        isMinorenne: true
    },
  ];

  lastId = 3;

  clienteChanged = new Subject<Cliente[]>();
  clienteSelezionato = new Subject<Cliente>();

  getCliente() {
    return this.dati.slice();
  }

  aggiungiCliente(nomeC: string, etaC: number, isMinorenneC: boolean) {
    const nuovoCliente: Cliente = {
      id: this.lastId++,
      nome: nomeC,
      eta: etaC,
      isMinorenne: etaC < 18,
    };

    this.dati.push(nuovoCliente);
    this.clienteChanged.next(this.dati.slice()); 
    
  }

  selezionaDettaglio(cliente: Cliente) {
    this.clienteSelezionato.next(cliente);
  }

  elimina(id: number): boolean {
    const index = this.dati.findIndex(cliente => cliente.id === id);
  
    if (index !== -1) {
      this.dati.splice(index, 1);
      this.clienteChanged.next(this.dati.slice());
      return true;
    }
  
    return false;
  }

  contaMinorenni(): number {
    return this.dati.filter(cliente => cliente.isMinorenne).length;
  }

  calcolaMediaEta(): number {
    const sommaEta = this.dati.reduce((acc, cliente) => acc + cliente.eta, 0);
    return sommaEta / this.dati.length;
  }

}

Understand the use of observables with a solution for my problem.