Function is not being called in service - Angular

Question

limit-Component.ts

import { Component, OnInit, EventEmitter } from '@angular/core';
import { CalculoService } from './calculo.service';
import { Dados } from './dados';

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

  calculoService: CalculoService;
  private dados: Dados = new Dados();

  constructor(_calculoService: CalculoService) {
    this.calculoService = _calculoService;
  }

  pegadado() {
    console.log(this.dados)
    console.log(this.calculoService)
  }

  ngOnInit() {


  }
}

ts.

export class Dados{
    pago: number;
    emprestimo: number;
    devendo: number;
    Disponivel: number;

}

calculo.service.ts

import { Injectable, EventEmitter } from '@angular/core';

import {Dados} from './dados'


@Injectable({
  providedIn: 'root'
})
export class CalculoService {

    emprestimo:number;
    pago:number;
    devendo:number;
    Disponivel:number;
    //mostrarGraficoEmitter = new EventEmitter<boolean>(false);

  pegadado(dados:Dados) {

    this.emprestimo = dados.emprestimo;
    this.pago = dados.pago;
    this.devendo = this.emprestimo - this.pago;
    this.Disponivel = 3500 - (this.pago + this.devendo);
    if (this.devendo == 0) {
      this.pago = 0
      this.Disponivel = 3500
    }

    return [this.emprestimo,this.pago,this.Disponivel,this.devendo];        
  }
}

html client limit.

<div class="main-content">
    <div class="panel-row">
        <div class="painel-butao">
            <div class="painel-emprestimo">
                <label for="emprestimo">Emprestimo</label>
                <input [(ngModel)]="dados.emprestimo" id="emprestimo" type="number"
                    placeholder="Digite quanto foi emprestado">
                <label for="pago"> pago</label>
                <input [(ngModel)]="dados.pago" id="pago" type="number" placeholder="Digite quanto foi pago">
            </div>
            <button type="submit" name="action" (click)="pegadado()" >calcular</button>
        </div>

The service footprint function is not being called and I am not being able to print the value on the console.

Answer 1

Your problem is that you are trying to perform the function footprint() who does the calculations in the file calculo.service in the archive limite.ts without referencing the function. To reference the function is simple:

limit-Component.ts

pegadado() {
   console.log(this.dados)

   this.calculoService.pegadado(this.dados)   // referencia a função
}

calculo.service.ts

pegadado(dados: Dados) {
   this.emprestimo = dados.emprestimo;
   this.pago = dados.pago;
   this.devendo = this.emprestimo - this.pago;
   this.Disponivel = 3500 - (this.pago + this.devendo);

   if (this.devendo == 0) {
     this.pago = 0;
     this.Disponivel = 3500;
   }

   // só para ver como já está fazendo os cálculos com os valores de limite.component
   console.log(`Empréstimo ${this.emprestimo} - Pago ${this.pago}
      Disponível ${this.Disponivel} - Devendo ${this.devendo}`)

   return [this.emprestimo, this.pago, this.Disponivel, this.devendo];
}

You can see your example working here.