how to pass data Input() from component to service class Angular

Question

I would like to pass data Input() from a component to a method service. Here is the code:

Component file

import {Component, Input} from "@angular/core";
import {ExemplesRemboursementService} from "./services/exemples-remboursement.service";

@Component({
  selector: "nsnet-exemples-remboursement-container",
  host: {
    "class": "mobile-first"
  },
  template: `
    <div class="exemples-remboursement-container">
      <nsnet-exemples-remboursement-titre-prix-moyen [titre]="titre"
                                                     [prixMoyen]="prixMoyen"></nsnet-exemples-remboursement-titre-prix-moyen>
      <nsnet-exemples-remboursement-liste-formule-courante
        [garantieCourante]="garantieCourante"
        [formuleCourante]="formuleCourante"
      ></nsnet-exemples-remboursement-liste-formule-courante>
      <button (click)="toggleFormuleComparative()" class="comparer-formule-btn">comparer les formules <i class="icon-chevron-down"></i></button>
      <nsnet-exemples-remboursement-liste-formule-comparative
        *ngIf="isFormuleComparativeOpen"></nsnet-exemples-remboursement-liste-formule-comparative>
    </div>
  `
})

export class ExemplesRemboursementContainerComponent {

  @Input()
  garantieCourante: string;
  @Input()
  formuleCourante: string;


...

}

Service file

import {ExemplesRemboursement, FormuleUtilisateur, GroupementDeGaranties} from "../utils/exemples-remboursement.utils";

export class ExemplesRemboursementService {


  exemplesRemboursement: ExemplesRemboursement[] = [
    {
      garantie: GroupementDeGaranties.SOINS_COURANTS,
      titre: "Exemple de remboursement d'une consultation d'un médecin traitant généraliste sans dépassements d'honoraires",
      prixMoyen: 25,
      lesRemboursements: [
        {
          formule: FormuleUtilisateur.INITIALE,

          montantsRegimeObligatoire: {
            securiteSociale: 16.50,
            notreRemboursement: 7.50,
            resteACharge: 1.00
          },
          montantsRegimeALS: {
            securiteSociale: 16.50,
            notreRemboursement: 7.50,
            resteACharge: 1.00
          }
        },
...

  geTitre(garantieCourante: string) {
    return this.exemplesRemboursement.find(g => g.garantie === garantieCourante).titre;
  }


  getPrixMoyen(garantieCourante: string) {
    return this.exemplesRemboursement.find(g => g.garantie === garantieCourante).prixMoyen;
  }

  getFormuleCouranteRegimeObligatoire(garantieCourante: string, formuleCourante: string) {
    return this.exemplesRemboursement.find
    (g => g.garantie === garantieCourante).lesRemboursements.find
    (f => f.formule === formuleCourante).montantsRegimeObligatoire;

  }

}

The purpose is to pass garantieCourante: string; and formuleCourante: string; as a parameter to the service method: getFormuleCouranteRegimeObligatoire(garantieCourante: string, formuleCourante: string);

Can you please help me?

Answer 1

In the component file, first import the service

import {ExemplesRemboursementService} from "[PROPER PLACE]"; // <- REPLACE "[PROPER PLACE] with the actual service file destination"

Then add the service to the constructor of the component. (If you don't have constructor then just add it)

constructor(
  ...
  private ExemplesRemboursementService: exemplesRemboursementService,
) { }

Now you can use the service by accessing this.exemplesRemboursementService like this

...
const x = this.exemplesRemboursementService.geTitre(this.garantieCourante);
...