Updates from the Angular Team and new Angular 17 features!
Tags: angular, webdev, programming, news
Published: 2023-11-07 14:00:00

**Table of content**
- [1 - New site domain and home for developers](#1-new-site-domain-and-home-for-developers)
- [2 - New tutorials and playground](#2-new-tutorials-and-playground)
- [3 - New Angular logo](#3-new-angular-logo)
- [4 - SSR and SSG are now **stable**](#4-ssr-and-ssg-are-now-stable)
- [5 - New control flow](#5-new-control-flow)
   * [@if](#if)
   * [@for](#for)
   * [@switch](#switch)
- [6 - Defer syntax is in developer preview](#6-defer-syntax-is-in-developer-preview)
- [7 - Standalone components **by default**](#7-standalone-components-by-default)
- [8 - Webpack **deprecated** in favor of Esbuild and Vite](#8-webpack-deprecated-in-favor-of-esbuild-and-vite)
- [9 - New inspect mode for dependency injection graph](#9-new-inspect-mode-for-dependency-injection-graph)
- [10 - Custom @Input transforms](#10-custom-input-transforms)
- [11 - Minor refactor in styles and styleUrl properties](#11-minor-refactor-in-styles-and-styleurl-properties)

---

So, on November 6, 2023, the Angular Team dropped some cool updates and talked about a bunch of new Angular 17 features that I'd love to **break down** for you.

You have the whole **live event** [on YouTube](https://www.youtube.com/watch?v=Wq6GpTZ7AX0&ab_channel=Angular).

---

## 1 - New site domain and home for developers

The new website with all the **documentation updated**, reference materials, and core concepts, is ready for new developers at [angular.dev](https://angular.dev/).

It's going to be **open-sourced** soon and might serve as a good production **example app**. I have mine [here](https://github.com/Ismaestro/angular-example-app), which I'm planning to update soon ;)

![Screenshot of the new website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxuiakmyja7ohbcvpso7.jpg)

---

## 2 - New tutorials and playground

They released **new tutorials** addressed to beginners, intermediate, and advanced developers. They are going to be embedded in the website itself.

There is going to be a new essentials guide, to manage all the core concepts.

The playground has been **redesigned** and is at [angular.dev/playground](https://angular.dev/playground).

---

## 3 - New Angular logo

Because new modern things are coming and the brand seems a little bit old. It tries to be more **inclusive**.

![New Angular logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqhdlvrxrnqnf9auzh3o.jpg)

---

## 4 - SSR and SSG are now **stable**

There is a new option for creating an app with the server side enabled from the start. A lot of people have been asking for improvements in this topic. Here they are:

1. ESM support for server builds
2. Build speed improvements for server bundles
3. Dev server SSR improvements
4. Hydration is now **stable for production**. More in [angular.dev/guide/hydration](https://angular.dev/guide/hydration).

The future is about **SSR streaming**. They are going in that direction.

---

## 5 - New control flow

Another key feature is the new control flow, which is easier to read and write, has new features like if-else, and has also performance improvements. Let's see some examples:

### @if

```html
<section>
    @if (user.loggedIn) {
        <app-dashboard />
    }
    @else {
        <app-login />
    }
</section>
```

### @for

```html
<section>
    @for (user of userList; track user) {
        <app-card [data]="user" />
    }
    @empty {
        <p>There were no items in the list</p>
    }
</section>
```

A few notes here. Track property is **mandatory** to avoid **memory problems**. We can use **@empty**, when the array has no elements, to directly show something.

### @switch

```html
<section>
    @switch (membershipStatus) {
        @case ("gold") {
            <p>Your discount is 20%</p>
        }
        @default {
            <p>Keep earning rewards.</p>
        }
    }
</section>
```

This new control flow makes the template render sometimes **90% faster** than before. It is **optional** and a **migration** is available for it.

---

## 6 - Defer syntax is in developer preview

Now we are going to be able to defer some parts of the template. It is **non-blocking**. Here you have a complete example:

```html
<button #trigger (click)="load = true">
    Load component
</button>

@defer (on viewport(trigger); when load == true) {
    <recommended-movies />
} @placeholder (minimum 500ms) {
    <img src="placeholder-image.png" />
} @loading (after 500ms; minimum 1s) {
    <spinner />
} @error {
    <p> Oops, something went wrong</p>
}
```

There are some built-in triggers, such as:

- **idle**: load as soon as your browser reports it is in an idle state.
- **interaction**: load when an element is clicked, focused, or similar behavior.
- **viewport**: load when the content enters the client's viewport window.
- **hover**: load when the mouse is hovering over an area.
- **timer**: load after a specific timeout.

You can also do prefetching and also create custom triggers:

```html
<section #trigger>
    ...
    @defer (prefetch on immediate;
            prefetch when val === true) {
        <large-component />
    }
    ...
</section>
```

The documentation has been improved and it's available at [angular.dev/guide/defer](https://angular.dev/guide/defer).

---

## 7 - Standalone components **by default**

The team has decided to set standalone components enabled by default. NgModules are **still valid**.

---

## 8 - Webpack **deprecated** in favor of Esbuild and Vite

As Standalone Components, **Esbuild is enabled by default** for new projects. As an example, the angular material documentation website now builds **2.5 times faster** using this configuration.

They **recommend** migrating all projects to Esbuild because of the performance improvements and future better support.

![Vite logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62w8eddkqdveuheg0hlm.jpg)

---

## 9 - New inspect mode for dependency injection graph

It is available in the **angular dev tools**.

![Devtools capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mhs8jesxki78gs0o0h9.jpg)

---

## 10 - Custom @Input transforms

If the value has to be transformed and normalized to a certain type, there are some built-in transformers:

```typescript
@Component({
  selector: 'custom-slider',
  ...
})
export class CustomSlider {
  @Input({transform: trimString}) label = '';
}
function trimString(value: string | undefined) {
  return value?.trim() ?? '';
}
```

---

## 11 - Minor refactor in styles and styleUrl properties

Last but not least, they updated these properties while creating a component. Before, they were arrays. Now you can write:

```typescript
@Component({
  styleUrl: './user-profile.component.css',
  styles: '.username {color: red; }',
  ...
})
```

---

I hope you have learned something new from all. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!