Pass an html ngModel value to service --Angular

Viewed 54

I want to pass an html ngModel value <kendo-dropdownlist style=" width: 92%;" [data]="year" [(ngModel)]="selectedYear"> which is located on Combocomponent.html, to a service which is called Home.service.ts.

Inside the service I have this code:

  selectedYear=2022;

  configUrl1 = 'https://localhost:44361/api/Active_Serviced_Outlets?Year='+this.selectedYear+'&quarter=1&month=1';
  getMethod1() {
    
    return this.http.get(this.configUrl1);
  }

I want to dynamically pass the [(ngModel)]="selectedYear" value to selected Year so every time the user inputs an year.

ComboComponent.html

I want to pass an html ngModel value <kendo-dropdownlist style=" width: 92%;" [data]="year" [(ngModel)]="selectedYear"> which is located on Combocomponent.html, to a service which is called Home.service.ts.

Inside the service I have this code:

  configUrl1 = 'https://localhost:44361/api/Active_Serviced_Outlets?Year=2021&quarter=1&month=1';
  getMethod1() {
    
    return this.http.get(this.configUrl1);
  }

I want to dynamically pass the [(ngModel)]="selectedYear" value to selected Year so every time the user inputs an year.

ComboComponent.html

<div class="row">
  <div class="column">

    <p> &nbsp; &nbsp;<b>Year </b></p>

    <kendo-dropdownlist [data]="year" [(ngModel)]="selectedYear"></kendo-dropdownlist>
  </div>
    </div>

ComboComponent.ts

  public year: Array<string> = [
    "2022",
    "2021",
    "2020",
    "2019",
    "2018",
  ];

  public get selectedYear() {
    return this._homeServise.selectedYear;
  }
  public set selectedYear(year: number) {
    this._homeServise.selectedYear = year;
  }
1 Answers

You need pass the value to service whenever the value is updated.

In template,

<kendo-dropdownlist (ngModelChange)="onChange($event)"  [data]="year" [(ngModel)]="selectedYear"></kendo-dropdownlist>

In ts,

onChange(year){
 this._homeServise.selectedYear = this.selectedYear;
}
Related