How to pass parameters to a typescript function from html?

Question

I am fetching my users in the form of a JSONArray and I want to show the data of each user when clicked on their names. but I am not able to pass the user.id into the function.

<ng-container *ngFor = "let user of users" >
        <button (onclick)="getdata(user.id)" mat-raised-button color="primary">{{user.name}}</button>
      </ng-container>

Angular uses event names for binding. docs: angular.io/guide/event-binding#binding-to-events — Totati
– Totati, Commented Oct 7, 2021 at 6:55
Sidenote: you don't have to use ng-container you can put the *ngFor directive directly on your button element. — Totati
– Totati, Commented Oct 7, 2021 at 6:56
Too many answer can be found on the stackoverflow for similar questions. For example; stackoverflow.com/questions/40211730/… is related to button usage on angular. — whitefang
– whitefang, Commented Oct 7, 2021 at 7:15

Boney · Accepted Answer · 2021-10-07 06:30:57Z

3

Can you please try the same with using only click() instead on onclick()

<ng-container *ngFor = "let user of users" >
    <button (click)="getdata(user.id)" mat-raised-button color="primary">{{user.name}}</button>
  </ng-container>

answered Oct 7, 2021 at 6:30

Boney

1,8362 gold badges13 silver badges20 bronze badges

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

Comments

Totati · Accepted Answer · 2021-10-07 07:01:48Z

2

Its angular use (click) instead of (onclick)

<ng-container *ngFor="let user of users">
  <button (click)="getdata(user.id)" mat-raised-button color="primary">
    {{ user.name }}
  </button>
</ng-container>

getdata(id) {
  console.log(id);
}

edited Oct 7, 2021 at 7:01

Totati

1,62214 silver badges26 bronze badges

answered Oct 7, 2021 at 6:29

navnath

3,7241 gold badge13 silver badges20 bronze badges

Comments

Jai248 · Accepted Answer · 2021-10-07 06:26:59Z

1

try this

<ng-container *ngFor = "let user of users" >
    <button (click)="getdata(user.id)" mat-raised-button color="primary">{{user.name}}</button>
</ng-container>

answered Oct 7, 2021 at 6:26

Jai248

1,64910 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to pass parameters to a typescript function from html?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related