DEV Community

Cover image for Updates from the Angular Team and new Angular 17 features!
Ismael Ramos 🚀
Ismael Ramos 🚀

Posted on • Originally published at ismaelramos.dev

Updates from the Angular Team and new Angular 17 features!

Table of content


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 ;)

Screenshot of the new website


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.

New Angular logo


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>
Enter fullscreen mode Exit fullscreen mode

@for

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Vite logo


9 - New inspect mode for dependency injection graph

It is available in the angular dev tools.

Devtools capture


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() ?? '';
}
Enter fullscreen mode Exit fullscreen mode

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; }',
  ...
})
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
rahilka profile image
Rahilka Simonova

Great post Ismael! I was looking for a post that summarize all the new features and thus is the one :)
I'm a big fan of the new control flow syntax, I think it's much clearer to use. I wrote a blog bost specifically on it, feel free to check it out : https://www.linkedin.com/posts/activity-7132687950542176257-bCNQ?utm_source=share&utm_medium=member_android

Collapse
 
amustafa16421 profile image
Mustafa_A

Concise 👍