How to add parameter to Angular click function in ngFor loop

Question

This seems simple but it doesn't work. I am making pagination for a list of things. I have a pagination object that is defined as such:

in my models.ts:

export interface PageLink {
    displayText: string;
    pageNumber: number;
    status: string;
}

in my controller:

pageLinks: Array<PageLink>;

in my html:

<a *ngFor="let link of pageLinks" (click)="togglePage('test')" class="{{link.status}}">{{link.displayText}}</a>

This all works without blowing up, however my desire was to have the pageNumber parameter of the PageLink object put inside of the togglePage() function. Doing this however:

<a *ngFor="let link of pageLinks" (click)="togglePage('{{link.pageNumber}}')" class="{{link.status}}">{{link.displayText}}</a>

Blows up. When i do this i get very many lines of error in my console however the gist of the error is this:

Got interpolation ({{}}) where expression was expected

Why does this happen, and how can i avoid it?

Note: This is Angular 5

Try this: (click)="togglePage(link.pageNumber)"

R. Richards
– R. Richards

2018-02-08 17:26:57 +00:00
Commented Feb 8, 2018 at 17:26 — R. Richards
– R. Richards, Commented Feb 8, 2018 at 17:26

Pankaj Parkar · Accepted Answer · 2018-02-08 17:36:42Z

4

No need to use interpolation. Whatever you have been passed to inside event attribute, it is going to evaluate against component context directly. The value of pageNumber would passed to togglePage function directly.

(click)="togglePage(link.pageNumber)"

edited Feb 8, 2018 at 17:36

answered Feb 8, 2018 at 17:27

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Dallas Caley Over a year ago

That's it. thanks. I don't completely understand why this works but at least it does... (I'll accept your answer as soon as the system lets me)

santosh singh · Accepted Answer · 2018-02-08 17:34:19Z

1

This will work.No need to use interpolation

  <a *ngFor="let link of pageLinks" 
(click)="togglePage(link.pageNumber)" class="{{link.status}}">{{link.displayText}}</a>

answered Feb 8, 2018 at 17:34

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

Collectives™ on Stack Overflow

How to add parameter to Angular click function in ngFor loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related