passing multiple arguments or object in (click)

Question

Problem is to pass the object or multiple arguments from template to component and use them to add data to API.

task.service.ts

addTasks(task: Task): Observable<Task>{
 let headers = new Headers({'Content-type': 'application/json'});
 let options = new RequestOptions({ headers: headers });
 return this.http.post(this.tasksUrl, {task}, options)
 .map(this.extractData)
 .catch(this.handleError);

}

task.component.ts

addTasks(task){
this.taskService.addTasks(task)
.subscribe(
  task => this.tasks.push(task),
  error => this.errorMessage = <any> error
);

}

Template Inputs:

<input #todoTime type="text" class="form-control">&nbsp;
<input #todoName type="text" class="form-control">

Template Button:

<button name="todoAdd" (click)="addTasks({name: todoName.value, time: todoTime.value}); todoName.value='',todoTime.value='' ">add</button>

right now what problem you are facing? Question statement does not explain the error or problem. — Malik Shahzad
– Malik Shahzad, Commented Jun 15, 2017 at 22:44
Also I think this is possible "<button (click)="addTask(todoName)"></button>" — Malik Shahzad
– Malik Shahzad, Commented Jun 15, 2017 at 22:46

Nehal · Accepted Answer · 2017-06-16 02:22:42Z

6

Replace the comman(,) with a semicolon when you are handling the click event for the button. That should work.

<button name="todoAdd" (click)="addTasks({name: todoName.value, time: todoTime.value}); todoName.value=''; todoTime.value='' ">add</button>

I have created this simple Plnkr that shows object is getting passed to addTasks() function.

answered Jun 16, 2017 at 2:22

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

passing multiple arguments or object in (click)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related