This content originally appeared on Angular Blog - Medium and was authored by Angular
Authors: Mark Thompson, Kristiyan Kostadinov
We’re extending Angular’s built-in template syntax to provide developers with a better way to define variables inside component templates.
The new @let syntax will enable developers to define a variable and reuse its value throughout the template. This new syntax also solves one the community’s most upvoted issues.
Continue reading to find out how you can use @let in your templates to improve your developer experience.
A new way to define reusable template variables
Angular’s template syntax supports complex JavaScript expressions but there has not been a frictionless way to store the result of an expression while still being able to reuse it across the template. Developers have had to resort to using non-ergonomic solutions to achieve this goal with directives and other solutions.
Let’s check out the new syntax:
@let name = value; // where value is a valid Angular expression
Now, within the template, a variable can be defined and used as you would expect according to Angular’s template syntax rules and conventions. For example:
@let name = 'Frodo';
<h1>Dashboard for {{name}}</h1>
Hello, {{name}}
Here’s another example of how @let can be used in a template:
<!-- Use with a template variable referencing an element -->
<input #name>
@let greeting = 'Hello ' + name.value;
<!-- Use with an async pipe -->
@let user = user$ | async;
When using the new @let declarations, keep in mind that they are scoped to the current view and its descendants, but cannot be accessed by parent or sibling views.
@let topLevel = value;
@if (condition) {
@let nested = value;
}
<div *ngIf="condition">
@let nestedNgIf = value;
</div>
<!-- Valid -->
{{topLevel}}
<!-- Error, not hoisted from @if -->
{{nested}}
<!-- Error, not hoised from *ngIf -->
{{nestedNgIf}}
@let declarations are read-only and cannot be reassigned. Their values will be recomputed on each change detection (e.g. if an async pipe changes). Attempting to write to them directly will result in a type checking error.
@let value = 10;
<!-- Error: `value` is not assignable -->
<button (click)="value = value + 1">Change the value</button>
Syntax definition
Let’s explore some of the details of the syntax definition for the @let syntax. The formal definition of the new syntax is:
- 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.
@let the fun begin
We’re thrilled to be releasing this new feature and we hope that it improves your developer experience. We’d love to hear your thoughts on the new @let syntax so please reply to this blog post or find us online at angular.dev, x.com/angular and youtube.com/@angular.
Introducing @let in Angular was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Angular Blog - Medium and was authored by Angular
Angular | Sciencx (2024-07-10T19:14:08+00:00) Introducing @let in Angular. Retrieved from https://www.scien.cx/2024/07/10/introducing-let-in-angular/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.