CODEWITHSUNDEEP
javascriptangulartypescript
Razvan Zamfir
Razvan Zamfir

Reputation: 4614

Passing parameter with value to a function does not work as expected

I am working on a small application with Anular 9 and Angular Material. I have a list of items, each with an "Edit" button. I tried to pass the id of the item to the editItem() method, not "traditionally" (for security reasons), via the URL, but this way:

In the template:

<div class="item-name">{{node.item.name}}</div>
<button mat-icon-button color="primary" (click)="editItem($event, id:string = node.item.id)">Edit</button>

In the .ts file:

editItem(event, id): void {
    event.stopPropagation();
    console.log("Item id is: " + id);
}

Instead of the expected result, I get a Missing expected ) at line <line number> error.

What am I doing wrong? What is a (simple) working alternative?

Upvotes: 1

Views: 97

Answers (2)

Jesse
Jesse

Reputation: 2599

As comments are suggesting, there's no concept of a named parameter in an Angular template. You define the function in the .ts file that is then called in the .html file.

You should call your function like:

<button mat-icon-button color="primary" (click)="editItem($event, 
node.item.id)">Edit</button>

Upvotes: 1

Passionate Coder
Passionate Coder

Reputation: 7294

You are using type declaration in function. Just pass value only

use like this

(click)="editItem($event, node.item.id)"

Simply pass item Id in your function

Upvotes: 1

Related Questions