title: How to add parameter to Angular click function in ngFor loop
body: <p>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:</p>
  
  <p>in my models.ts:</p>
  
  <pre><code>export interface PageLink {
      displayText: string;
      pageNumber: number;
      status: string;
  }
  </code></pre>
  
  <p>in my controller:</p>
  
  <pre><code>pageLinks: Array&lt;PageLink&gt;;
  </code></pre>
  
  <p>in my html:</p>
  
  <pre><code>&lt;a *ngFor="let link of pageLinks" (click)="togglePage('test')" class="{{link.status}}"&gt;{{link.displayText}}&lt;/a&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;a *ngFor="let link of pageLinks" (click)="togglePage('{{link.pageNumber}}')" class="{{link.status}}"&gt;{{link.displayText}}&lt;/a&gt;
  </code></pre>
  
  <p>Blows up.  When i do this i get very many lines of error in my console however the gist of the error is this:</p>
  
  <p><strong>Got interpolation ({{}}) where expression was expected</strong></p>
  
  <p>Why does this happen, and how can i avoid it?</p>
  
  <p>Note: This is Angular 5</p>