Master Angular 17 (a study guide)

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

RFC: Built-In 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 as WeakMap and WeakSet 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!