Angular 18.1: Template Local Variables with @let

Key takeaways

• Syntax: let variableName = expression;
• Scope: The variable is only available within the HTML element or block where it's declared.
• Common scenarios:
  • Reduce repetition of complex expressions.
  • Better handle type narrowing.
  • Define complex styling options.
  • Improve template readability.

Best practices

• Use let to minimize repetition.
• Use let to improve type narrowing.
• Use let to define complex styling options.
• Carefully consider using let for calculations or business rules.

Thoughts

The let declaration is a welcome addition that simplifies variable management in templates and improves code readability. It's particularly useful for reducing repetition and defining complex styling options. However, it's important to carefully consider using let for calculations or business rules, as it could make the code harder to maintain.

Additional resources

• Official Angular documentation on the let declaration: https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f?gi=63f5b3e52822

How do you plan to use the let declaration in your Angular projects?

Leave a comment below and share your thoughts!