📚 Updates from the Angular Team and new Angular 17 features!

Table of content

• 1 - New site domain and home for developers
• 2 - New tutorials and playground
• 3 - New Angular logo
• 4 - SSR and SSG are now stable
• 5 - New control flow
  • @if
  • @for
  • @switch
• 6 - Defer syntax is in developer preview
• 7 - Standalone components by default
• 8 - Webpack deprecated in favor of Esbuild and Vite
• 9 - New inspect mode for dependency injection graph
• 10 - Custom @Input transforms
• 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.

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.

It's going to be open-sourced soon and might serve as a good production example app. I have mine here, which I'm planning to update soon ;)

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.

3 - New Angular logo

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

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.

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

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

@for

<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

<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:

<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:

<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.

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.

9 - New inspect mode for dependency injection graph

It is available in the angular dev tools.

10 - Custom @Input transforms

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

@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:

@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!