<p dir="auto"><strong>Context</strong></p>
<p dir="auto">Local variables (defined with the <code class="notranslate">#</code> character at a element attribute) don't apply for this use case: rqw local variables for a loop with <code class="notranslate">ngFor</code>.</p>
<p dir="auto">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.</p>
<p dir="auto">Specifying a value for a local variable allows you to select a specific directive associated with the current element. For example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;input #name=&quot;ngForm&quot; ngControl=&quot;name&quot; [(ngModel)]=&quot;company.name&quot;/&gt;"><pre class="notranslate"><code class="notranslate">&lt;input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/&gt;
</code></pre></div>
<p dir="auto">will set the instance of the <code class="notranslate">ngForm</code> directive associated with the current in the <code class="notranslate">name</code> variable.</p>
<p dir="auto">So local variables don't allow to set a value created for the current element of a loop.</p>
<p dir="auto">If I try to do something like that:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div *ngFor=&quot;#elt of eltList&quot; &gt;
  &lt;span #localVariable=&quot;elt.title&quot;&gt;&lt;/span&gt;
  {{localVariable}}
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div *ngFor="#elt of eltList" &gt;
  &lt;span #localVariable="elt.title"&gt;&lt;/span&gt;
  {{localVariable}}
&lt;/div&gt;
</code></pre></div>
<p dir="auto">I have this following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: Template parse errors:
There is no directive with &quot;exportAs&quot; set to &quot;elt.title&quot; (&quot;
  &lt;div *ngFor=&quot;#elt of eltList&quot; &gt;
    &lt;span [ERROR -&gt;]#localVariable=&quot;elt.title&quot;&gt;&lt;/span&gt;
    {{localVariable}}
  &lt;/div&gt;
&quot;): AppComponent@2:10"><pre class="notranslate"><code class="notranslate">Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
  &lt;div *ngFor="#elt of eltList" &gt;
    &lt;span [ERROR -&gt;]#localVariable="elt.title"&gt;&lt;/span&gt;
    {{localVariable}}
  &lt;/div&gt;
"): AppComponent@2:10
</code></pre></div>
<p dir="auto">Angular2 actually looks for a directive matching the provided name <code class="notranslate">elt.title</code> here)... This plunkr shows this: <a href="https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview" rel="nofollow">https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview</a>. The section "Local variables" of this link <a href="http://victorsavkin.com/post/119943127151/angular-2-template-syntax" rel="nofollow">http://victorsavkin.com/post/119943127151/angular-2-template-syntax</a> also describes this.</p>
<p dir="auto">In addition to the current element of the iteration, <code class="notranslate">ngFor</code> only provides a set of exported values that can be aliased to local variables: <code class="notranslate">index</code>, <code class="notranslate">last</code>, <code class="notranslate">even</code> and <code class="notranslate">odd</code>.</p>
<p dir="auto"><strong>Question</strong></p>
<p dir="auto">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.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div *ngFor=&quot;#t of todos; #i=index; #formattedTodoName=format(t.name)&quot;&gt;
  {{formattedTodoName}}
  (...)
  {{formattedTodoName}}
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div *ngFor="#t of todos; #i=index; #formattedTodoName=format(t.name)"&gt;
  {{formattedTodoName}}
  (...)
  {{formattedTodoName}}
&lt;/div&gt;
</code></pre></div>
<p dir="auto">I would be interested in having your feedbacks.</p>
<p dir="auto">This question follows the one from the StackOverflow website: <a href="http://stackoverflow.com/questions/35257455/ng2-how-to-create-variable-in-ngfor-loop/" rel="nofollow">http://stackoverflow.com/questions/35257455/ng2-how-to-create-variable-in-ngfor-loop/</a>.</p>
<p dir="auto">Thanks very much!</p>
<p dir="auto">It looks like if I use the <code class="notranslate">@Attribute</code> on a class constructor:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="constructor(@Attribute('tabindex') tabindex: string) {}"><pre class="notranslate"><span class="pl-en">constructor</span><span class="pl-kos">(</span>@<span class="pl-v">Attribute</span><span class="pl-kos">(</span><span class="pl-s">'tabindex'</span><span class="pl-kos">)</span> <span class="pl-s1">tabindex</span>: <span class="pl-s1">string</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">it causes the TS compiler to throw a semantic error:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="src/app/components/checkbox/checkbox.ts(63,14): error TS1239: Unable to resolve signature of parameter decorator when called as an expression. Supplied parameters do not match any signature of call target."><pre class="notranslate">src/app/components/checkbox/checkbox.ts(63,14): error TS1239: Unable to resolve signature of parameter decorator when called as an expression. Supplied parameters <span class="pl-k">do</span> not match any signature of call target.</pre></div>