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.

are you trying something like this - stackblitz.com/edit/angular-jxj78j?file=app/app.component.html, click on each cell and check console for selected cell — Naga Sai A
– Naga Sai A, Commented Apr 2, 2018 at 20:48

Naga Sai A · Accepted Answer · 2018-04-02 21:35:32Z

3

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

edited Apr 2, 2018 at 21:35

answered Apr 2, 2018 at 21:12

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Neha Uniyal Over a year ago

It is giving the below response in the console: XHR failed loading: GET "localhost:8000/api/promotionnames?md_id=[object%20Object]"

Naga Sai A Over a year ago

this.calendarService.getName(v.md_id).subscribe(data => this.promoName = data); will change object for md_id to md_id value

Naga Sai A Over a year ago

after that localhost:8000/api/promotionnames?md_id=1 should work in browser if service is working

Neha Uniyal Over a year ago

In that case , should not it be displaying the following message in the console:: GET "localhost:8000/api/promotionnames?md_id=1"; instead of : XHR failed loading: GET "localhost:8000/api/promotionnames?md_id=[object%20Object]";

Naga Sai A Over a year ago

'v' is the item value - {md_id :1 , driver_name:'A'} object , so in the calendar service , use v.md_id to form the correct url as localhost:8000/api/promotionnames?md_id=1

|

Gustavo Lopes · Accepted Answer · 2018-04-02 20:51:12Z

1

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);
}

answered Apr 2, 2018 at 20:51

Gustavo Lopes

4,2534 gold badges24 silver badges63 bronze badges

Comments

Matthias Herrmann · Accepted Answer · 2018-04-02 20:33:49Z

0

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

answered Apr 2, 2018 at 20:33

Matthias Herrmann

2,7906 gold badges36 silver badges72 bronze badges

Collectives™ on Stack Overflow

Angular4 : Passing input value to service

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related