Master Angular 17 (a study guide)
Tags: angular, typescript, javascript
Published: 2023-11-06 09:25:00

---
title: Master Angular 17 (a study guide)
published: true
description: A study guide that helps you learn the new version of Angular
tags: #angular #typescript #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/di63pigd5wqexx0uesuw.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-10-23 20:47 +0000
canonical_url: https://www.angularaddicts.com/p/master-angular-17
---

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](https://github.com/angular/angular/pull/51821))
* 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](https://github.com/angular/angular/pull/51755))
* 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](https://github.com/angular/angular/discussions/50719)

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](https://github.com/gergelyszerovay/angular-17-control-flow/blob/main/src/app/app.component.html). 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:


```html
<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](https://www.angularaddicts.com/p/angular-17-new-control-flow-with-signals)

---

### 📌Deferred loading blocks

RFC: [Deferred Loading](https://github.com/angular/angular/discussions/50716)

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](https://www.angularaddicts.com/p/angular-17-feature-deferred-loading-with-signals)

---

### 📌View Transitions API support

Official docs: [withViewTransitions](https://next.angular.io/api/router/withViewTransitions)

PR: [feat(router): Add feature to support the View Transitions API](https://github.com/angular/angular/pull/51314)

This feature adds support to the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API). This API enables easy animations when transitioning between different DOM states. [Netanel Basal](https://twitter.com/NetanelBasal) explains how to use view transitions from Angular [in his article](https://netbasal.com/angular-v17s-view-transitions-navigate-in-elegance-f2d48fd8ceda).

---

### 📌Support for passing in `@Component.styles` as a string

Official docs: [Component.styles](https://next.angular.io/api/core/Component#styles)

PR: [feat(core): support styles and styleUrl as strings](https://github.com/angular/angular/pull/51715)

We can pass a string containing CSS rules to the styles attribute of `@Component`:


```ts
@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](https://github.com/angular/angular/pull/50738)

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](https://github.com/angular/angular/pull/51334)

[Daniel Rosenwasser](https://twitter.com/drosenwasser) highlighted the most interesting new TS features in his announcement ([Announcing TypeScript 5.2](https://devblogs.microsoft.com/typescript/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](https://www.linkedin.com/in/gergelyszerovay/), 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](https://angularaddicts.com/). 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](https://www.angularaddicts.com/) 🔥

Follow me on [Substack](https://www.angularaddicts.com/), [Medium](https://medium.com/@GergelySzerovay), [Dev.to](https://dev.to/gergelyszerovay), [Twitter](https://twitter.com/GergelySzerovay) or [LinkedIn](https://www.linkedin.com/in/gergelyszerovay/) to learn more about Angular!