Angular Turns Teen: Embracing the Future with Version 17

Angular is now a teenager. The team at Google marked the 13th birthday of the framework with the launch of v17 in November. This latest version provides significant improvements around performance and developer experience.

If you have been thinking about migrating to Angular or are keen to know about what the latest changes might make possible, then stick around and we'll chat about that together.

The appeal for .NET and Java developers

Among the JavaScript ecosystems, Angular has a particular appeal for developers with a .NET or Java background, and this is rooted in several factors.

There's a similar design philosophy between Angular, .NET, and Java. There's an emphasis for strong typing, component-based architecture, and enterprise-level application development. Angular aligns really well with those principles, making it a comfortable transition for developers accustomed to these environments.

Secondly, Angular uses TypeScript, which is a superset of JavaScript. TypeScript's strong typing and object-oriented features are quite familiar to .NET and Java developers, making the learning curve less steep.

Angular is designed for developing scalable and maintainable large-scale applications, a common requirement in the .NET and Java spheres. Its built-in functionalities for routing, state management, and form handling are particularly beneficial for complex applications.

Angular is a fully-fledged MVC framework, which is a familiar pattern for .NET and Java developers. This structured approach, compared to more flexible but less opinionated JavaScript libraries or frameworks, often resonates well with those coming from that kind of structured background.

Collectively, these aspects make Angular a compelling choice for developers with a .NET or Java background, providing a blend of familiarity and robustness suited for enterprise-level application development. But even if that's not you and your team, Angular is well worth a consideration.

Angular has a strong community and corporate backing. This often provides a sense of stability and reassurance of the ongoing support, which is crucial for enterprise developers in particular.

Exploring v17 on angular.dev

If you haven't had a chance to look at angular.dev, the future home for Angular, where version 17 has launched and the new documents are living, then you should. It's a really beautiful website, and it finishes with a playground that allows you to see Angular up and running.

There have been a lot of changes in Angular over the past few versions. Not least of all, the ability to have standalone components which the playground shows off really clearly.

Whenever I consider if a framework is right for me and the teams I'm working with, I think deeply about the documentation and educational resources that are available. The Angular documentation is first class. It combines clear, in-depth guides with easily referenceable code. Tutorials that allow you to build applications. And an embedded playground so that you can test things out separate from your core development workflow. You can then bring the results of your experiments into your application.

What's new

So let's look at 5 features that are new in version 17.

1. Control flow

First there's the built-in control flow. If you've worked with Angular before, you'll be familiar with attributes like `*ngIf`, `*ngSwitch` and `*ngFor`. With this version, Angular has introduced a new built-in control flow. Rather than having to apply ngIf to container objects, and separately reference else blocks, we can use `@if` and `@else` directly. This syntax not only simplifies code but also closely aligns with standard JavaScript, enhancing both readability and maintainability.

So this code

<div *ngIf="winningNumber; else unsuccessfulTry">
Congrats! You have won!
</div>
<ng-template #unsuccessfulTry>
  Not this time!
</ng-template>

becomes

@if (winningNumber) {
  Congrats! You have won!
} @else {
  Not this time!
}

This is a major simplification and makes the template easier to read. It also makes adding `@else if` blocks trivial which was impossible with the legacy syntax.

This is even more compelling when we view the changes with switches where this:

<div [ngSwitch]="userRole">
  <manager-dashboard *ngSwitchCase="'manager'"/>
  <employee-dashboard *ngSwitchCase="'employee'"/>
  <guest-dashboard *ngSwitchDefault/>
</div>

becomes

@switch (userRole) {
  @case ('manager') { <manager-dashboard/> }
  @case ('employee') { <employee-dashboard/> }
  @default { <guest-dashboard/> }
}

With the new syntax, the same logic is expressed more succinctly and in a style that's closer to typical JavaScript switch-case statements. This new approach can make the code more readable and easier to maintain, especially for developers familiar with JavaScript or TypeScript.

The new built-in `@for` loop syntax is another huge developer improvement, changing something like this:

<ul>
  <li *ngFor="let product of products; trackBy: trackByProductId">
    {{ product.name }}
  </li>
  <li *ngIf="products.length === 0">
    No products available
  </li>
</ul>

to this

<ul>
  @for (product of products; track product.id) {
    <li>{{ product.name }}</li>
  } @empty {
    <li>No products available</li>
  }
</ul>

2. Deferrable views

Deferrable views in Angular are a powerful feature introduced to enhance the performance and user experience of web applications by enabling more efficient and ergonomic lazy loading of components.

Lazy loading is a design pattern commonly used to defer the initialisation of an object until the point at which it is needed. This can significantly improve efficiency and performance, particularly in scenarios where resources are intensive or not immediately necessary.

In the context of Angular, deferrable views take lazy loading to the next level by allowing developers to declaratively specify parts of their application that should be loaded lazily. This means that certain components, directives, or even entire sections of your application can be loaded only when they are required, rather than during the initial load of the application.

As a developer, we can wrap expensive components in a defer block which will be handled at compile-time. Angular finds all of the components, directives and pipes used inside this block and generates dynamic imports. It also manages the complexity of loading and switching between states.

@defer { 
  <expensive-component /> 
}

There are other blocks that allow for placeholder, loading and error states:

@defer { 
  <expensive-component /> 
} @loading {
  Loading ...
} @error {
  Something went wrong!
} @placeholder {
  Just getting that for you ...
}

This simple looking syntax is hiding a host of complexity and makes it easier to build faster and more efficient applications. There are more triggers that you can explore in the documentation.

Easier SSR and SSG

When building JavaScript applications, there are decisions to be made about when we inject the data. The traditional approach is to send the application to the client, have the client fetch the data it needs and then build the UI.

This can lead to a delay before the user can interact with the application. We have more options with server-side rendering and server-side generation now.

For more static experiences, we will want to inject the data at build and send compiled HTML and CSS over the wire, with very little JavaScript.

For more dynamic experiences, we might want to build the initial view on the server and then have the client re-hydrate the application.

These different approaches have been possible with Angular in the past but now they are available with `ng new` when you are initialising a project.

For an existing project, you can add the `@angular/ssr` project and use these capabilities today.

4. New Lifecycle Hooks

As SSG and SSR become a bigger reality in the Angular ecosystem, the team want to move away from DOM emulation and direct DOM manipulations. In theory, this makes for more reliable applications but in reality your code and that of 3rd party libraries often want direct access to and knowledge of elements on the screen.

To help with this, there are two new lifecycle hooks introduced in v17:

- `afterRender` - this registers a callback to be invoked each time the application finishes rendering

- `afterNextRender` - this registers a callback to be invoked the next time the application finishes rendering.

This hooks will only be invoked in the browser, so we can be confident we are dealing with real elements and getting real information. If we wanted to use these hooks to instantiate a map element from map library, it might look like this:

ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { afterNextRender, AfterRenderPhase } from '@angular/core';
@Component({
  selector: 'my-map-cmp',
  template: `<div #mapContainer style="height: 400px;"></div>`,
})
export class MyMapCmp {
  @ViewChild('mapContainer') mapContainerRef: ElementRef;
  map: any; // Replace 'any' with the appropriate type based on the map library used
  constructor() {
    afterNextRender(() => {
      this.initializeMap();
    }, { phase: AfterRenderPhase.Write });
  }
  initializeMap() {
    // Assuming 'MyMapLibrary' is the map library you are using
    this.map = new MyMapLibrary(this.mapContainerRef.nativeElement, {
      // Map initialization options go here
      zoom: 8,
      center: { lat: -34.397, lng: 150.644 }
    });
  }
}

5. Using esbuild and vite

In v16, you could preview a new build chain using vite and esbuild. As teams have been using this in their own projects, they have seen around 67% build time improvements in some of their applications.

This pipeline is now the default for new applications. Combining this build style with the benefits of SSG/SSR you can get a 87% speed imrpovement and an 80% faster edit-refresh loop when developing.

This can save development teams hours and allow for features to be developer more quickly.

Conclusion

There are a whole host of other improvements that v17 brings along with it, from testing, changes to dependency injection and reactivity and updates to the Angular Material UI system.

Angular hasn't gone away and, instead, is moving from strength to strength. This is a battle-tested framework which is allowing enterprises to build robust and reliable applications. If you or your team haven't explored Angular recently, maybe it's time to give it another look.

Would you like to know more?

Take a look at our Angular Training Course or Advanced Angular