The new version of Angular is going to be released this week.
🎯Changes and new features
In this article, I list out the most important changes and new features, also share resources that will teach you how these new Angular features work:
- New, declarative control flow
- Deferred loading blocks
- View Transitions API support
- Support for passing in
@Component.styles
as a string - Angular's animations code is lazy-loadable
- TypeScript 5.2 support
Additional important changes:
- The core Signal API is now stable (PR)
- Signal-based components are not ready yet, they won't be a part of Angular 17
- Node.js v16 support has been removed and the minimum support version is v18.13.0 (PR)
- We expect that Esbuild will be the default builder and the default dev server will use Vite
📌New, declarative control flow
Angular 17 has a new template control block syntax and a declarative control flow. It contains blocks for:
- conditional rendering (
@if
,@else
,@switch
,@case
and@default
) - rendering the items of a collection (
@for
), and handling empty collections with the@empty
block
One of the most important benefits of these new control blocks is that they will support zoneless applications with Signals.
To demonstrate how the new control blocks work, here is a small example. I create a checkbox and bind it to the isChecked
signal. The signal's default value is true
, so initially the checkbox is checked, and the content of the @if
block is rendered:
<div>
<input #checkbox type="checkbox" [checked]="isChecked()" (change)="isChecked.set(checkbox.checked)" id="checkbox"/>
</div>
<div>
@if (isChecked()) {
<span>Checked</span>
}
@else {
<span>Not checked</span>
}
</div>
The @if (logical_expression) {
statement creates an @if
block with a logical expression. I use the isChecked()
signal as a logical expression, as it evaluates to a boolean value.
I added an @else
block under the @if
block, it's rendered when the logical expression in the @if
block evaluates to false
, so in our case, if the value of the isChecked()
signal is false. So if I uncheck the checkbox, Angular renders the contents of the @else
block.
I wrote an article to explain all the control block types (@if
, @else
, @switch
, @case
, @default, @for
, @empty
) by examples: Angular v17 feature: new control flow syntax
📌Deferred loading blocks
RFC: Deferred Loading
In the new Angular 17 version, the Angular team pushes lazy-loading to the next level: Angular now has a @defer
control block enabling lazy-loading of the block's content. Lazy-loading also applies to the dependencies of the content of the block: all the components, directives and pipes will be lazy-loaded, too. Check out my tutorial on how to use various lazy loaded blocks: New Angular 17 feature: deferred loading
📌View Transitions API support
Official docs: withViewTransitions
PR: feat(router): Add feature to support the View Transitions API
This feature adds support to the View Transitions API. This API enables easy animations when transitioning between different DOM states. Netanel Basal explains how to use view transitions from Angular in his article.
📌Support for passing in @Component.styles
as a string
Official docs: Component.styles
PR: feat(core): support styles and styleUrl as strings
We can pass a string containing CSS rules to the styles attribute of @Component
:
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
templateUrl: './app.component.html',
styles: `/* 👈 */
h3 {
background-color: red;
}
`
})
export class AppComponent { }
📌Angular's animations code is lazy-loadable
PR: feat(animations): Provide a way to lazy load the animations
We can enable the lazy-loading of the animations code with the new provideLazyLoadingAnimations()
function:
bootstrapApplication(AppComponent, {
providers: [
provideAnimationsAsync(),
// ...
],
}).catch((err) => console.error(err));
If we use provideLazyLoadingAnimations()
, the main bundle size is reduced by about 16Kb, and the animation code is loaded on demand.
📌TypeScript 5.2 support
PR: feat(core): support TypeScript 5.2
Daniel Rosenwasser highlighted the most interesting new TS features in his announcement (Announcing TypeScript 5.2):
-
using
Declarations and Explicit Resource Management - Decorator Metadata
- Named and Anonymous Tuple Elements
- Easier Method Usage for Unions of Arrays
- Copying Array Methods
-
symbols
asWeakMap
andWeakSet
Keys - Type-Only Import Paths with TypeScript Implementation File Extensions
- Comma Completions for Object Members
- Inline Variable Refactoring
- Clickable Inlay Parameter Hints
- Optimized Checks for Ongoing Type Compatibility
👨💻About the author
My name is Gergely Szerovay, I work as a frontend development chapter lead. Teaching (and learning) Angular is one of my passions. I consume content related to Angular on a daily basis — articles, podcasts, conference talks, you name it.
I created the Angular Addict Newsletter so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered.
Next to the newsletter, I also have a publication called — you guessed it — Angular Addicts. It is a collection of the resources I find most informative and interesting. Let me know if you would like to be included as a writer.
Let’s learn Angular together! Subscribe here 🔥
Follow me on Substack, Medium, Dev.to, Twitter or LinkedIn to learn more about Angular!
Top comments (0)