No log a primeira vez fiz um deposito de 100, na segunda fiz outro deposito de 10 ai printou os dois depositos, na terceira operação saquei 100 ai mostrou no log o saque de 100 e dois prints de deposito de 100.

@Component({
  selector: 'app-root',
  imports: [BannerComponent, FormNovaTransacaoComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {

  transacoes = signal<Transacao[]>([]);
  saldo = computed(() => {
    return this.transacoes().reduce((total, transacao) => {
      console.log('Tipo: ', transacao.tipo, 'Valor: ', transacao.valor, 'Total: ', total);

      switch (transacao.tipo) {
        case TipoTransacao.DEPOSITO:
          return total + transacao.valor;
        case TipoTransacao.SAQUE:
          return total <= 0 ? 0 : total - transacao.valor;
        default:
          throw new Error('Tipo de transação inválido');
      }
    }, 0);
  });

  processarTransacao(transacao: Transacao) {
    if (transacao.tipo === TipoTransacao.SAQUE && this.saldo() <= 0) {
      alert('Saldo insuficiente para realizar o saque!');
      return;
    }

    this.transacoes.update((listaAtual) => [transacao, ...listaAtual]);
  }
}

<main class="form-wrapper">
  <form class="form" (ngSubmit)="aosubmeter()" ngNativeValidate >
    <h2 class="titulo">Nova transação</h2>
    <div class="campos">
      <label class="campo-grupo">
        Transação
        <div class="select-wrapper">
          <select [(ngModel)]="tipoTransacao" name="select-tipo-transacao" class="campo select-tipo-transacao" required>
            <option value="" disabled selected>Selecione o tipo de Transação</option>
            @for (tipo of tipoTransacaoEnum | keyvalue; track tipo.key) {
              <option [value]="tipo.value">{{ tipo.value }}</option>
            }
          </select>
        </div>
      </label>
      <label class="campo-grupo">
        Valor
        <div class="input-wrapper">
          <input
            [(ngModel)]="valorTransacao"
            type="number"
            name="valor"
            class="campo input-valor-transacap"
            min="0.01"
            step="0.01"
            placeholder="R$ 0,00"
            required
          >
        </div>
      </label>
      <button class="botao-confirmar-transacao">Confirmar transação</button>
    </div>
  </form>
</main>

@Component({
  selector: 'app-form-nova-transacao',
  imports: [FormsModule, KeyValuePipe],
  templateUrl: './form-nova-transacao.component.html',
  styleUrl: './form-nova-transacao.component.css'
})
export class FormNovaTransacaoComponent {
  tipoTransacao = ''
  valorTransacao = '';

  transacaoCriada = output<Transacao>();
  tipoTransacaoEnum = TipoTransacao;

  aosubmeter() {
    const transacao = new Transacao(
      this.tipoTransacao as TipoTransacao,
      Number(this.valorTransacao),
    );

    this.transacaoCriada.emit(transacao);

    this.valorTransacao = '';
    this.tipoTransacao = '';
  }
}