Angular 17 - The Renaissance Continues

Angular 17 continues the "Angular Renaissance" and adds many great features that modernize Angular as a framework & make working with it more fun than ever.

Fittingly, the Angular team also introduced a new brand and website with the release of Angular 17.

Oh, and it also adds many features that improve performance - just like that, behind the scenes.

Whilst Angular 17 adds many new features, here are the key new features:

• Easier Server-side Rendering SSR

• New control flow syntax (@if, @for, @switch)

• Deferrable views (@defer)

• Stable Signals (though there's more to come in future versions)

Other noteworthy features are covered at the end of the article.

It's also worth pointing out that, of course, as always with new Angular versions, all new features are added in a backward-compatible way! You can still write code as you're used to and you don't have to use these new features.

With Angular 17, adding SSR is as easy as running ng add @angular/ssr. No complex setup or anything like that is needed.

For new projects, you're automatically asked whether SSR should be enabled when creating a project via ng new.

In addition, SSR is not just easier to add but also implemented such that the website loads as quickly as possible and you achieve overall great performance.

You can learn more about Angular SSR here.

Angular 17 adds a new template syntax for adding control flow statements in your Angular templates without using *ngIf, *ngFor or *ngSwitch.

@if (someCondition) {

  <p>Rendered conditionally!</p>

}

@for (item of items; track item.id) {

  {{ item.name }}

}

@switch (source) {

  @case ("google") {

    <p>Thanks for finding us on Google</p>

  }

  @case ("youtube") {

    <p>Thanks for following us on YouTube</p>

  }

  @default {

    <p>Maybe we'll meet in the future</p>

  }

}

This new syntax also offers better performance since it can be handled more efficiently behind the scenes.

The new control flow syntax is available as a "Developer Preview" (i.e., it may change in some details) in Angular 17 projects.

Important: You can, of course, still use the "old" structural directives! You don't have to migrate.

Lazy loading just got (way!) easier!

Instead of being limited to lazy-loading on route-level or fiddling around with complex APIs for achieving more granular lazy loading, Angular 17 now offers another new template syntax: @defer

@defer can be used in conjunction with different triggers (viewport visibility, interaction, on hover & more) to lazily load some part of a template.

<section #links>

  <h2>Useful Links</h2>

  @defer (on viewport(links)) {

    <app-useful-links />

  }

</section>

It's never been easier to lazy-load content on such a granular level in Angular apps!

Of course, you can still also use route-level lazy loading in conjunction with this new feature.

// this still works!
const routes: Routes = [
  {
    path: 'users',
    loadChildren: () => import('./users/users.module').then(m => m.UsersModule)
  }
];

Signals were introduced as an alternative state management & change detection mechanism with Angular 16.

Now, with the release of Angular 17, Signals are stable - though there are more Signal-related features to come in the future (e.g., "Signal-based Components").

const input = signal(1);

const result = computed(() => input() + 5); // result would now yield 6

input.set(2);
// result would now yield 7

Angular 17 actually adds many more exciting features & improvements.

By default, new Angular projects created via ng new now use Standalone Components.

But you can still create projects that use NgModules as a default by running ng new <project-name> --standalone false.

Of course you can also still combine Standalone Components and NgModules in one and the same project.

For example, it now, by default, uses Vite & Esbuild for the development server and for building the Angular code for production.

You can still switch back to Webpack if you want or need to though.

With Angular 17, if a component that uses OnPush change detection uses signals, changes to these signals will only lead to the affected component to be checked for changes - instead of the entire component tree.

Definitely also read the official announcement blog post to learn about all the changes & details.

In addition, you also might want to explore my bestselling Angular - The Complete Guide course.

Over the next weeks & months, I'll update this course to reflect all those latest new features whilst also making sure that I cover the "old" concepts so that you're prepared to work on any Angular project.

Existing students will get this update for free!