Local template variable initialization to reduce code redundancy

[phil294]

I'm submitting a ...

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current way of using laborious variable calls
Consider this code template:

<td *ngFor="let attribute of attributes">
		<p>{{ product.productData.get(attribute.id).value }}</p>
		<p>{{ product.productData.get(attribute.id).date }}</p>
		<p>{{ product.productData.get(attribute.id).something }}</p>
</td>

That's an awful lot of repeated typing for repeated logic. It doesn't feel to me like it would make sense to create a sub-component for these two lines. So I want to suggest the introduction of local variable assignment. The above could then look like the following:

Suggested syntax

<td *ngFor="let attribute of attributes" #values="product.productData.get(attribute.id)">
		<p>{{ values.value }}</p>
		<p>{{ values.date }}</p>
		<p>{{ values.something }}</p>
</td>

I deliberately used the #x="y"-syntax, even though it is currently not meant to be used like that (and will throw an error).

• Angular version: 2.4.9

• Browser: all

• Language: all

[Toxicable]

This already exists with the improved ngIf in version 4.x, for example

<div *ngFor="let item of [1, 2, 3]">
  <div *ngIf="item; let value">
    {{value}}
  </div>
</div>

will produce the output

1
2
3

[phil294]

@Toxicable thank you. Unfortunately I don't understand how to use this syntax and I cannot find any information about it. Could you please post an example on how one would use this syntax for the given code snippet in the starting post?

I will also post this on Stackoverflow.
edit: http://stackoverflow.com/questions/42678757/how-does-the-enhanced-ngif-syntax-in-angular-4-0-0-rc-1-work .
So the new ngIf-syntax is no real variable initializiation, you'd even have to define your own function for everything. I dont think it fits the given scenario

[Toxicable]

Again, this is only available of Angular version 4.x, therefore there is next to no docs since they're still being written.
Here's an example plunkr of how you might do it
http://plnkr.co/edit/XV7MExjlJBzReACFLnIO?p=preview
Since this appears to be a Support request might I ask that you either ask on Stack overflow or on Gitter since this issue tracker isn't suitable for support requests

[DzmitryShylovich]

@phil294 there's a proposal to improve syntax #15020
does it solve your issue?

[phil294]

It does! Thanks. I'm closing this.
Edit. I just realized, it does not. Toxicable's workaround would do:

<td *ngFor="let attribute of attributes">
	<div *ngIf="getProductData(attribute); let data"> <!-- this is the workaround -->
		<p>{{ data.value }}</p>
		<p>{{ data.date }}</p>
	</div>
</td>

However, this includes adding an extra *ngIf, even if there is nothing to check for. This request is about simple code redundancy. See opening question.
I dont think reopening is possible. So, whatever.

[angular-automatic-lock-bot]

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.}