Angular has released a new version, bringing forth many intriguing changes, from an improved documentation to significant performance enhancements, marking the beginning of a renaissance for the JavaScript framework.

In this article, we will explore the most significant changes in this new version that you should be aware of to stay up-to-date with the latest developments and not lose track of Angular’s evolution.

A Fresh Look

Angular has been reborn, and in every aspect, we now have a new documentation that holds great promise, along with a new logo. All of this is aimed at providing a new home for Angular developers: angular.dev.

New Documentation

As we know, Angular has revamped documentation where we can:

• Review detailed documentation.
• Follow tutorials.
• Explore freely with the integrated playground.
• Examine API references.

Declarative Control Flow

The introduction of a declarative control flow mechanism marks a paradigm shift in how we manage templates. While the *ngIf structure has been a standard for conditional rendering, Angular 17 introduces a syntax more akin to JavaScript. This not only aligns with modern development practices but also provides a familiar feel for developers.

Let’s explore the changes in these structures, showcasing an example of structures in previous versions and versions with the new Angular version.

if

Here’s a simple example of rendering a table or list using *ngIf based on the value of the showTable variable.

<!-- Angular 16 and previous versions -->
<div *ngIf="showTable; else showList">
  <table>
    <!-- full table -->
  </table>
</div>

<!-- Angular 17 -->
@ngIf (showTable) {
  <table>
    <!-- full table -->
  </table>
}

As observed, in the new Angular version, we have a clearer structure, and we no longer need to use extra tags or the ng-template tag.

for

For the *ngFor structure, we have a better structure and clarity compared to previous versions. Also, the mandatory track property is added, where we need to provide an identifier for each item (similar to other frameworks and libraries like Reacts or Vue) to uniquely identify each element. This not only enhances element identification but also contributes to performance improvements.

<!-- Angular 16 and previous versions -->
<div *ngFor="let item of items; let i = index;">
  <p>{{ item }}</p>
</div>

<!-- Angular 17 -->
@for (item of items; track item.id) {
  <p>{{ item }}</p>
}

switch

In the ngSwitch structure, we also have a clearer structure that is very helpful for developers because it significantly simplifies the way we express our conditions, almost identical to JavaScript.

The example shows how to render a template according to the value of the color variable.

<!-- Angular 16 and previous versions -->
<div [ngSwitch]="color">
  <app-color *ngSwitchCase="red"/>
  <app-color *ngSwitchCase="blue"/>
  <app-default-color *ngSwitchDefault/>
</div>

<!-- Angular 17 -->
@switch (color) {
  @case ('red') {
    <app-red-color />
  }
  @case ('blue') {
    <app-blue-color />
  }
  @default {
    <app-default-color />
  }
}

If you want to explore in more detail the update of the declarative control flow, you can visit this article where we detail the updates.

Stable Application Builders

Angular has different builders for building our applications. The default one we use is Client Side Rendering (CSR), where the application is built on the client. Now, the option to start our app using Server Side Rendering (SSR) has been stably integrated. This brings several advantages, such as better performance by sending fully rendered HTML to users, along with improvements in SEO. If we want to start our app using SSR, we can initiate it with the --ssr flag.

ng new my-app --ssr

Even if we don’t specify the --ssr flag, the creation assistant will ask us if we want to start our app using SSR. If we already have an app, we can add SSR to our app with the following command:

ng add @angular/ssr

Deferred Loading Blocks

One of the things that had been requested for some time (although it could already be done) is the lazy loading of specific elements or complete components.

Now we can use defer to delay the loading of components in response to different user interactions, such as clicks, inputs, or hovers, and of course, when certain logic conditions are met in our applications.

In the following example, we see how to use defer to load the component only when the “Load my profile” button is clicked. In this case, the trigger interaction is used, and it validates that the load variable is true. Optional values for loading time can be specified using the placeholder, loading, and error options.

<button (click)="load = true" #showProfileBtn>
  Load my profile
</button>

@defer (on interaction(showProfileBtn); when load == true) {
  <my-profile />
} @placeholder (minimum 300ms) {
  <!-- placeholder -->
} @loading (after 300ms; minimum 1.5s) {
  <loading-component /> <!-- loading section -->
} @error {
  <p>Something went wrong, please try again... </p> <!-- handle error msg -->
}

There are different triggers for this functionality:

• idle: loads when the browser reaches an idle state.
• viewport: loads when the content matches the user’s screen sizes.
• interaction: loads when the user has an interaction (click on an element, focus, etc.).
• timer: loads after a defined waiting time.
• hover: loads when the mouse moves over a particular area

ESBuild and Vite Are a Reality

ESBuild will be enabled by default for new projects, and for the test server (dev), the default server will be Vite. This brings significant improvements in performance regarding application building. All of this is related to the fact that Webpack will no longer be used.

Installation or Update

Before creating any new project with Angular, I suggest reviewing the new documentation and seeing for yourself the changes that have been released, as well as exploring the new features with the playground.

Install and Create a New Project

If you want to install Angular in its latest version on your computer, you can run the following command (you need to have Node.js installed):

npm install --global @angular/cli@next

Once installed, you just need to navigate to the folder where you want to save the project and run the following command:

ng new my-project

Replace my-project with the name you want to give to your project. Once done, follow the instructions of the assistant to create your application.

Update a Project

If you already have an Angular version installed and a project in a version prior to 17, all you need to run is the ng update command. The assistant will guide you on which dependencies to update in your project to have the latest version running.

In summary, Angular 17 is a version that brings significant changes to the framework, including a series of improvements and new features that make it more powerful and easier to use. These enhancements make Angular a more attractive option for the development of modern web applications. As a recap, some of the points we covered in this article include:

The new Angular syntax is more concise and readable, helping developers write cleaner and more efficient code.

• Performance improvements in Angular can make applications faster and smoother, enhancing the user experience.
• New Angular features, such as deferrable views and triggers, can help developers create more complex and functional applications.
• The Angular ecosystem offers a wide variety of possibilities, so keep experimenting and building to stay updated on the latest updates.

If you found this article helpful, please don’t hesitate to follow, subscribe, and applaud. Thank you!