angularangular2-templatengfor

How do i concatenate the ngFor index variable with a hash symbol?

I am building an FAQ section that populates the FAQ via an ngFor loop and an FAQ item component. I want to be able to link to positions within the page using the anchor tag. For this i've downloaded the scrollTo module from npmjs. https://www.npmjs.com/package/ng2-scroll-to

This scrollTo module takes a href argument and i'm trying to concatenate the # and the index counter variable of ngFor within a template expression, but when i do this i get an error. Heres my code.

<section id="top">
  <ol>
    <li *ngFor="let item of faqItems; let i=index" scrollTo href={{"#" + i}}>{{item.question}}</li>
  </ol>
<dl>
  <app-faq-item *ngFor="let item of faqItems; let i=index" 
  [question]="item.question" [answer]="item.answer" [attr.id]="i"></app-faq-item>
</dl>
<button scrollTo scrollableElementSelector="#top" scrollYTarget="0">Go top</button>
</section>

The error comes from the href part. Anyone have an idea how to join the i variable and the hashsymbol into one string?

Solution

  • It should be as,

    <li *ngFor="let item of faqItems; let i=index" scrollTo href="#{{i}}">{{item.question}}</li>