Support for the new Angular @let syntax

[Tortila90]

Description

Angular 18.1 introduced the new @let syntax: https://angular.dev/api/core/@let

It differs from the recently added @if or @for, because it doesn't contain any following brackets or parentheses.

As of now any code in a file that comes after @let may not be formatted correctly, especially if there are more @if or @for.

Input

With this new feature, when I give like this input:

@let foo = 'bar';
<div>
  @if (foo) {
  {{ foo }}
}
</div>

Expected Output

I'd like to see this output:

@let foo = 'bar';
<div>
  @if (foo) {
    {{ foo }}
  }
</div>

[liesahead]

This is so much needed, if I correctly remember the approximate implementation it should not be difficult to extend keywords list.

[ozearkhan]

@bitwiseman is this issue still available to take on? any guidance on specific areas I should focus on would be appreciated.

[Tortila90]

@bitwiseman is this issue still available to take on? any guidance on specific areas I should focus on would be appreciated.

@ozearkhan There is a comprehensive definition of this syntax in the docs. I hope this will help.

The @let syntax is formally defined as:

• The @let keyword.
• Followed by one or more whitespaces, not including new lines.
• Followed by a valid JavaScript name and zero or more whitespaces.
• Followed by the = symbol and zero or more whitespaces.
• Followed by an Angular expression which can be multi-line.
• Terminated by the ; symbol.