Skip to content

Conversation

@crisbeto
Copy link
Member

@crisbeto crisbeto commented Jun 26, 2024

Enables the new @let syntax by default.

@let declarations are defined as:

  1. The @let keyword.
  2. Followed by one or more whitespaces.
  3. Followed by a valid JavaScript name and zero or more whitespaces.
  4. Followed by the = symbol and zero or more whitespaces.
  5. Followed by an Angular expression which can be multi-line.
  6. Terminated by the ; symbol.

Example usage:

@let user = user$ | async;
@let greeting = user ? 'Hello, ' + user.name : 'Loading';
<h1>{{greeting}}</h1>

Fixes #15280.

@crisbeto crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer area: core Issues related to the framework runtime target: minor This PR is targeted for the next minor release labels Jun 26, 2024
@ngbot ngbot bot added this to the Backlog milestone Jun 26, 2024
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Jun 26, 2024
Enables the new `@let` syntax by default.

`@let` declarations are defined as:
1. The `@let` keyword.
2. Followed by one or more whitespaces.
3. Followed by a valid JavaScript name and zero or more whitespaces.
4. Followed by the `=` symbol and zero or more whitespaces.
5. Followed by an Angular expression which can be multi-line.
6. Terminated by the `;` symbol.

Example usage:
```
@let user = user$ | async;
@let greeting = user ? 'Hello, ' + user.name : 'Loading';
<h1>{{greeting}}</h1>
```

Fixes angular#15280.
@crisbeto crisbeto requested a review from dylhunn June 26, 2024 16:48
@crisbeto crisbeto marked this pull request as ready for review June 26, 2024 16:48
@dylhunn dylhunn added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Jun 26, 2024
@crisbeto crisbeto added merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note and removed merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note labels Jun 26, 2024
@dylhunn
Copy link
Contributor

dylhunn commented Jun 26, 2024

This PR was merged into the repository by commit 0a48d58.

The changes were merged into the following branches: main

@dylhunn dylhunn closed this in 0a48d58 Jun 26, 2024
@muuvmuuv
Copy link

I have a question on this if its ok here. With using myInput() several times like myModel().someLoop myModel().options.hideOnClose, will let improve „getting“ the value or does it make no performance differences in doing a @let = myModel()?

@crisbeto
Copy link
Member Author

If you do @let foo = myModel(), myModel() will still be invoked every time the template function runs, but it won't be invoked again when you use it.

@Harpush
Copy link

Harpush commented Jun 27, 2024

If you do @let foo = myModel(), myModel() will still be invoked every time the template function runs, but it won't be invoked again when you use it.

So this isn't template computed right? Just a variable assignment. Is there any future plans to support template computed?

@crisbeto
Copy link
Member Author

The plan is to eventually have it be like computed in the template, but at the moment the main benefits are:

  1. Allows you to reuse the expression across the template.
  2. Has better type narrowing.

@muuvmuuv
Copy link

That wasnt what I meant. Will multiple myModel() calls in the template infect the performance or will do one @let = myModel() make the performance better because of just one call? I don't know what internally happens on Signals when I call them multiple times, it always feels like they are being "executed" instead of just returning a value like a getter.

@muuvmuuv
Copy link

@pkozlowski-opensource
Copy link
Member

I don't know what internally happens on Signals when I call them multiple times, it always feels like they are being "executed" instead of just returning a value like a getter.

A signal will always return its latest value (this applies to signals and computed signals) unless a dependency of a computed changed. In this sense those are "smart getters" and definitively help with performance of expensive computations.

That wasnt what I meant. Will multiple myModel() calls in the template infect the performance or will do one @let = myModel() make the performance better because of just one call?

It will be one call. The performance benefits will be getting bigger as you've got more calls to myModel() and calls to myModel() are "expensive" - which again is not the case for signals. In this sense there is no performance benefit of putting let assignments in front of computed signals - even if those are accessed in a template multiple times.

@olegdunkan
Copy link
Contributor

olegdunkan commented Aug 6, 2024

What is about scope of visibility of @let variable?

@let value = 0;
  
@if (true) {
    @let value = 1; 
    {{value}}  //will output 1
}
 
<ng-template #tpl>
    @let value = 2; 
    {{value}}  //will output 2
</ng-template>
<ng-container *ngTemplateOutlet="tpl"/>

<a-comp>
      @let value = 3; //ups, cannot declare @let called 'value' as there is another symbol in the template with the same name.
      {{value}} 
</a-comp>

As I understand from above named block creates scope of visibility, ng-template also creates scope of visibility, but other markup elements don't.
Am I right?

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime detected: feature PR contains a feature commit target: minor This PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Template Local Variables

6 participants