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

string concatenation in angular 6
angular 4 ngfor multiple arrays
html concatenate string and variable
angular concatenate string in html
angular template string concatenation
concat string in html angular 8
concatenate in angular
concatenation in html tag

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?

It should be as,

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

Angular NgFor: Everything you need to know, <section id="top"> <ol> <li *ngFor="let item of faqItems; let i=index" scrollTo Anyone have an idea how to join the i variable and the hashsymbol into one string  0 How do i concatenate the ngFor index variable with a hash symbol? Jun 23 '18. 0 How to search for a string using each member of array as a parameter Sep 5 '19.

the {{}} operator (string interpolation) evaluates the variable inside. So if you call your variable i with {{i}} you can access to it anywhere in your ngfor scope, its value can't bet altered inside. so you can concatenate with as below : #{{i}}. hope it helps.

Questions for tag ngfor, In this tutorial, we are going to learn about the ngFor directive. We will To get the index of each element, we can define another variable in the ngFor directive. But it could also be the hash of the element. args: string[]): any { let values = [] for (let key in value) { values.push(value[key]) } return values } }. Outside of *ngFor, a variable preceded by # defines a template reference variable, typically a reference to an element in the DOM. <input #heroBox > <p>{{heroBox.value}}</p> The heroBox variable is a reference to the input box and we can use it to display its value property. That's not what the hero variable does inside the *ngFor.

for translation I did...

<li*ngFor="let lang of translate.getLangs()" (click)="changeLanguage(lang)"
      [ngClass]="{'active':lang===translate.currentLang}"> {{ "translate." + [lang] | translate }}  </li>

so I guess something like it should work for your case too.

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

Concatenate String with Variable inside HTML element tag in , How do i concatenate the ngFor index variable with a hash symbol? Data binding inside ngFor · NgFor to repeat a div form and assign inputs to NgModel. Note: The CAT* functions and concatenation operator can combine character and numeric variables into a single (larger) character value. The process implicitly converts a numeric value into a character and doesn't generate a SAS note or warning, unlike some of the other conversion methods.

48 answers on StackOverflow to the most popular Angular questions, In Angular 6, you can use Interpolation to concatenate a string with a variable inside an HTML element tag. In order to pass variables to a string you must call upon the format() method. One benefit of using the format() method is that you do not have to convert integers into a string before concatenating the data. It will do that automatically for you. This is one reason why it is the preferred operator method.

Use of local template variable within a *ngIf · Issue #6179 · angular , ngFor with index as value in attribute; Define global constants in Angular 2; Angular to add bootstrap to an angular-cli project; access key and value of object using *ngFor I need somehow to bind the inner html of a div to the variable value. [hash].bundle.js the polyfill dependencies (@angular, RxJS. Remarks. The CONCATENATE function joins two text strings into one text string. The joined items can be text, numbers or Boolean values represented as text, or a combination of those items. You can also use a column reference if the column contains appropriate values. The CONCATENATE function in DAX accepts only two arguments,

AngularJS to Angular concepts: Quick reference, <div *ngFor="let thing of things"> <span (click)="props.toggle()"> {{thing.name}} </​span> <div *ngIf="thing.extra"> <collapse #props> something  Here are the detailed steps: Select a cell where you want to enter the formula. Type =CONCATENATE( in that cell or in the formula bar. Press and hold Ctrl and click on each cell you want to concatenate. Release the Ctrl button, type the closing parenthesis in the formula bar and press Enter.

Comments
  • Try this href="{{'#' + i}}"