Using local variables with ngFor #6947

templth · 2016-02-08T10:01:15Z

Context

Local variables (defined with the # character at a element attribute) don't apply for this use case: rqw local variables for a loop with ngFor.

In fact, when you define a local variable on an HTML element it corresponds to the component if any. When there is no component on the element, the variable refers to the element itself.

Specifying a value for a local variable allows you to select a specific directive associated with the current element. For example:

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>

will set the instance of the ngForm directive associated with the current in the name variable.

So local variables don't allow to set a value created for the current element of a loop.

If I try to do something like that:

<div *ngFor="#elt of eltList" >
  <span #localVariable="elt.title"></span>
  {{localVariable}}
</div>

I have this following error:

Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
  <div *ngFor="#elt of eltList" >
    <span [ERROR ->]#localVariable="elt.title"></span>
    {{localVariable}}
  </div>
"): AppComponent@2:10

Angular2 actually looks for a directive matching the provided name elt.title here)... This plunkr shows this: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview. The section "Local variables" of this link http://victorsavkin.com/post/119943127151/angular-2-template-syntax also describes this.

In addition to the current element of the iteration, ngFor only provides a set of exported values that can be aliased to local variables: index, last, even and odd.

Question

It would be interested to have a way to define custom local variables within the loop. This way you could define a computed variable once and use it several times in the loop block.

<div *ngFor="#t of todos; #i=index; #formattedTodoName=format(t.name)">
  {{formattedTodoName}}
  (...)
  {{formattedTodoName}}
</div>

I would be interested in having your feedbacks.

This question follows the one from the StackOverflow website: http://stackoverflow.com/questions/35257455/ng2-how-to-create-variable-in-ngfor-loop/.

Thanks very much!

The text was updated successfully, but these errors were encountered:

KiaraGrouwstra · 2016-04-02T13:12:23Z

Seconding this, I was just looking for the same thing, then searched here hoping for existing solutions. Having to have duplicate code here is silly, and being able to call a function only once (in case it's expensive) without having to first store its result in the component admittedly also adds a bunch of convenience. I'd consider this feature request a pretty valuable improvement for the template language.

zoechi · 2016-04-02T18:07:50Z

dup of #2451 ?

KiaraGrouwstra · 2016-04-03T02:12:06Z

Looks like it to me, yeah. Guess if @templth agrees we can close this copy.

templth · 2016-04-30T08:22:31Z

Sure, I agree ;-) Thanks guys for pointing this out!

angular-automatic-lock-bot · 2019-09-08T08:21:51Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

templth closed this as completed Apr 30, 2016

KiaraGrouwstra mentioned this issue May 5, 2016

Support assigning expression result to local variable within templates #2451

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Using local variables with ngFor #6947

Using local variables with ngFor #6947

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Using local variables with ngFor #6947

Using local variables with ngFor #6947

Comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!