feat: support `as` syntax in template/* bindings … by mhevery · Pull Request #15025 · angular/angular · GitHub

Showing the new and the equivalent old syntax.

*ngIf="exp as var1”
=> *ngIf="exp; let var1 = ngIf”
*ngFor="var item of itemsStream |async as items”
=> *ngFor="var item of itemsStream |async; let items = ngForOf”

Can we avoid using as? It overlaps with TS casts, that'll be quite confusing for users.

@mprobst as pointed out here #15020 (comment) ES2015 uses it very much in the same way as to the proposed way here, also I do challenge you to find a more fitting word

@Toxicable yeah, the ES6 imports are a point, but that's more of a renaming situation (and also more similar to casts), where this looks to me more like an assignment.

We couldn't make *ngIf="var1 = exp” work, could we? That'd also match JS syntax, module introducing a new symbol: if (var1 = exp) { ... use var1 ... }.

@mprobst As explained here #15020 (comment) and in the comment following it explains that let user = foo already has meaning in Angular

I wonder if we could use a different symbol to make the assignment more clear and remove the overlap? let foo := expr? In any case, I'm probably just adding noise here, sorry ;-)

If the as keyword is a problem, why not changing to be ? The intent is very clear and it is not used in Typescript nor JS IMHO: *ngIf="exp as var1” => *ngIf="exp be var1” >> => *ngIf="exp; let var1 = ngIf”

so both let i=index and index as i are supported, right? do you think it's a good idea to have multiple ways to do the same thing?

If we take away let then we break a whole lot of people. So, yes both will be supported.

I believe we discussed this after this comment was posted and decided that we do want to remove the old way. @mhevery did I understand the conclusion of the conversation correctly?

I think you should add a console warning that let syntax is deprecated (similar to template element) so it will be easier to remove it in v5

Old way can't be removed as it would break a lot of people. Think *ngFor="let item of items" What was discussed was to remove *ngIf="exp; let var" However, it turns out that can't be removed either as it would make the else statement weird.

So in summary. Old syntax is supported but the new syntax is preferred. Both will continue to work.

❤️ 👍 🦄 🌈

I believe we discussed this after this comment was posted and decided that we do want to remove the old way. @mhevery did I understand the conclusion of the conversation correctly?

I LOVE that the as can be used for all the local variables. It makes the whole syntax look so much more consistent and cleaner. ❤️

With regards to the as conflict with typescript, as others mentioned the conflict already exists with ESM aliasing. Our semantics of as are consistent with that of ESM aliasing and therefor, I don't think that we should be dismissing as on the basis of the typescript conflict.

It's also worthwhile keeping in mind that nowhere in Angular templates we use types or have affordances for explicit type position in the syntax, so I that's another argument why the as conflict is a non-issue in my opinion.

This doesn't look right to me as it is much more lax in the syntax than you probably intent. You probably meant this to be !this.next.isOperator(chars.$SEMICOLON) && !this.next.isOperator(chars.$COMMA) && because optionalCharacter will advance the token which appears not what you intended.

If you make the above change you need to undelete line 717 an put it after your block.

fixed

addressed the issue

Closes angular#15020 Showing the new and the equivalent old syntax. - `*ngIf="exp as var1”` => `*ngIf="exp; let var1 = ngIf”` - `*ngFor="var item of itemsStream |async as items”` => `*ngFor="var item of itemsStream |async; let items = ngForOf”`

… syntax

- see: angular/angular#15025

* feat(common): support `as` syntax in template/* bindings Closes angular#15020 Showing the new and the equivalent old syntax. - `*ngIf="exp as var1”` => `*ngIf="exp; let var1 = ngIf”` - `*ngFor="var item of itemsStream |async as items”` => `*ngFor="var item of itemsStream |async; let items = ngForOf”` * feat(common): convert ngIf to use `*ngIf="exp as local“` syntax * feat(common): convert ngForOf to use `*ngFor=“let i of exp as local“` syntax * feat(common): expose NgForOfContext and NgIfContext

Why is this limited to ngFor and ngIf?

@realappie it is not limited, if you write your own structural directive it will work there

* feat(common): support `as` syntax in template/* bindings Closes angular#15020 Showing the new and the equivalent old syntax. - `*ngIf="exp as var1”` => `*ngIf="exp; let var1 = ngIf”` - `*ngFor="var item of itemsStream |async as items”` => `*ngFor="var item of itemsStream |async; let items = ngForOf”` * feat(common): convert ngIf to use `*ngIf="exp as local“` syntax * feat(common): convert ngForOf to use `*ngFor=“let i of exp as local“` syntax * feat(common): expose NgForOfContext and NgIfContext

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.

mhevery requested review from IgorMinar, robwormald and tbosch March 9, 2017 06:22

googlebot added the cla: yes label Mar 9, 2017

mhevery force-pushed the as_syntax branch from 0731f4d to 83a7085 Compare March 9, 2017 18:40

DzmitryShylovich reviewed Mar 9, 2017

View reviewed changes

mhevery force-pushed the as_syntax branch 4 times, most recently from 3022f82 to 4787d03 Compare March 9, 2017 20:05

IgorMinar approved these changes Mar 9, 2017

View reviewed changes

chuckjaz previously requested changes Mar 10, 2017

View reviewed changes

mhevery force-pushed the as_syntax branch from 834bdec to cfb8dd2 Compare March 10, 2017 22:56

mhevery force-pushed the as_syntax branch from cfb8dd2 to c8da41b Compare March 10, 2017 23:16

mhevery added 4 commits March 10, 2017 17:08

feat(common): convert ngIf to use *ngIf="exp as local“ syntax

203ee65

feat(common): convert ngForOf to use *ngFor=“let i of exp as local“…

ef93998

… syntax

feat(common): expose NgForOfContext and NgIfContext

71d43db

mhevery force-pushed the as_syntax branch from c8da41b to 71d43db Compare March 11, 2017 01:08

mhevery added the action: merge The PR is ready for merge by the caretaker label Mar 14, 2017

chuckjaz approved these changes Mar 15, 2017

View reviewed changes

chuckjaz added the pr_action: queued label Mar 15, 2017

chuckjaz merged commit c10c060 into angular:master Mar 15, 2017

d-koppenhagen added a commit to angular-buch/book-monkey2 that referenced this pull request Mar 23, 2017

as syntax in template bindings

309b0a9

- see: angular/angular#15025

johnrbaur mentioned this pull request Apr 7, 2017

Support for as syntax in template mgechev/codelyzer#289

Closed

mhevery deleted the as_syntax branch June 2, 2017 17:01

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

feat: support `as` syntax in template/* bindings … by mhevery · Pull Request #15025 · angular/angular · GitHub

Uh oh!

feat: support as syntax in template/* bindings … - #15025

feat: support as syntax in template/* bindings …#15025chuckjaz merged 4 commits intoangular:masterangular/angular:masterfrom mhevery:as_syntaxmhevery/angular:as_syntaxCopy head branch name to clipboard

Conversation

mhevery commented Mar 9, 2017

Uh oh!

mprobst commented Mar 9, 2017

Uh oh!

Toxicable commented Mar 9, 2017 • edited by mhevery Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mprobst commented Mar 9, 2017

Uh oh!

Toxicable commented Mar 9, 2017

Uh oh!

mprobst commented Mar 9, 2017

Uh oh!

johanchouquet commented Mar 9, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

IgorMinar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

IgorMinar commented Mar 9, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

abdel-ships-it commented Aug 24, 2017

Uh oh!

tytskyi commented Aug 24, 2017

Uh oh!

angular-automatic-lock-bot Bot commented Sep 12, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

feat: support as syntax in template/* bindings …#15025
chuckjaz merged 4 commits into
angular:masterfrom
mhevery:as_syntax

Toxicable commented Mar 9, 2017 •
edited by mhevery
Loading