Angular4 : Passing input value to service

Question

I am new to Angular 4. I have a variable "md_id" which is binded to the view as follows.

HTML:

                    <tr *ngFor="let item of driverData">
                        <td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId" ngDefaultControl (click)="runPromo()">{{item.driver_name}}
                        </td>
                    </tr>

JSON:

[{"md_id": 1, "driver_name": "A"}, {"md_id": 2, "driver_name": "B"}, {"md_id": 3, "driver_name": "C"}, {"md_id": 4, "driver_name": "D"}]

I want that based on the value of md_id selected, it should pass that particular value of md_id to another service that can display the results accordingly based upon the selection.

The selected value of md_id should be passed to the following service.

Service:

public getName(md_id){
   return this.http.get(url+'/api/names?md_id='+md_id)
   .map((resService: Response) => resService.json())
    }

Component:

 this.calendarService.getName(this.md_id).subscribe(data => this.promoName = data);

Could you please help me in knowing how can I pass the value of one service binded in the view to be passed into another service.

Am I missing here something?

Please help.

Answer 1

To achieve expected result, use below option

HTML:

Pass ' item ' as parameter of runPromo()

<tr *ngFor="let item of driverData">
                        <td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId" ngDefaultControl (click)="runPromo(item)">{{item.driver_name}}
                        </td>
                    </tr>

Component:

Add service to the providers of Component

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [CalendarService]
})

assign md_id to service - CalendarService in component service call

  constructor(private calendarService: CalendarService) {

    this.runPromo = (v) =>{ 
       this.calendarService.getName(v.md_id).subscribe(data => this.promoName = data);
    this.promo1= !this.promo1;    
   }
  }

code sample - https://stackblitz.com/edit/angular-service-ukuoyd?file=app/app.service.ts

Answer 2

You're getting confused about the md_id and driverData.md_id .

You're not setting the md_id variable anywhere, only the driverData.md_id .

The best way to accomplish what you're trying to do, is:

<td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId" ngDefaultControl (click)="runPromo(item)">{{item.driver_name}}

And then:

function promo(item) {
    this.calendarService.getName(item.md_id).subscribe(data => this.promoName = data);
}

Answer 3

Just pass the variable to the click method like this: (click)="runPromo(item.md_id)"

And call the service in the method body of runPromo

Fundamentals: https://angular.io/guide/user-input