Introduction to Angular 15

Angular 15 is the latest version of the popular Angular front-end development framework.

Digital Delivery
-
10 min
Digital Delivery
/
Introduction to Angular 15

In 2022, we witnessed a lot of new releases, from NextJS to SvelteKit as well as Vite.js, but the best is yet to come. At the end of the year, you don’t want to miss the new version of Angular.

This time it won’t be a small upgrade like Angular 14, but rather a new version with major updates.

Angular 15 is the latest version of the popular Angular front-end development framework. This release brings many new features and improvements, including:

  • Performance improvements: Angular 15 has been optimized to provide better performance and reduced application load times.
  • TypeScript 4.1 support: Angular 15 supports the latest version of TypeScript, providing developers with new features and a better programming experience.
  • Better support for development tools: Angular 15 has been enhanced to provide better integration with popular development tools, such as code editors and testing tools.
  • New features for building web applications: Angular 15 adds new features to make building web applications easier, including tools for data management, navigation and error handling.

In this article we will take a closer look at these improvements.

Some of Angular 15’s best new features

Directive Composition API:

The Directive Composition API is a new feature in Angular 15 that allows developers to create Angular directives that can be composed with other directives.

This means that developers can create reusable components that can be easily combined with other components to create complex user interfaces.

Here is an example:

angluar 15 directive composition API

In this example, we have created a ColorDirective which can be used to apply a given color to an HTML element.

The directive takes as input a myColor property which contains the color to be used for coloring.

When the value of this property is changed, the ngOnChanges method is called and uses the value to color the element.

angluar 15 directive composition API- Adservio

In this example, the ColorDirective is applied to a div element and the myColor property is set to 'green'.

As a result, the text in the div element will be green. The Composition API also allows us to compose directives to create more complex components.

For example, if we have another directive called TooltipDirective which adds a tooltip to an element when the mouse is moved over it, we can easily combine these two directives to create a new reusable component:

angluar 15 directive composition API- Adservio

Router Unwraps Default Imports

The Router Unwraps Default Imports is a feature that allows us to retrieve a module's default imports when using the Angular router.

Previously, when importing a default module into your Angular application, you had to use the code below:

Router Unwraps Default Imports - Adservio

Before;

Router Unwraps Default Imports

With Angular 15;

Router Unwraps Default Imports with Angular 15- Adservio

Router and HttpClient tree-shakable standalone APIs

Angular 15 allows you to build a multi-route application using the new router standalone APIs! To declare the root route you can use the following :

Router and HttpClient tree-shakable standalone APIs

Where myLazyRoutes are declared in;

Router and HttpClient tree-shakable standalone APIs with myLazyRoutes

and finally, register the appRoutes in the bootstrapApplication call;

Router and HttpClient tree-shakable standalone APIs

The advantage of the provideRouter API is that it can be modified in the tree-shakable!

Bundlers can remove unused router functionality at build time (tree-shakable). During the testing phase with the new API, the Angular team found that removing these unused features from the bundle reduced the router code size in the application bundle by 11%.

Functional router guards

In Angular 15, using the tree-shakable standalone router APIs reduces boilerplate in guards.

Let’s look at an example where we define a guard which verifies if the user is logged in:

Functional router guards - Adservio

LoginService implements most of the logic and in the guard you only need to invoke isLoggedIn().

Even though the guard is pretty simple, there’s often a lot of boilerplate code. With the new fun isLoggedIn().

Even though the guard is pretty simple, there’s often a lot of boilerplate code. With the new functional router guards, you can refactor this code down to:

Adservio, Angular 15

New image directive features:

Angular 15’s release also includes a few new features for the image directive:

  • Automatic srcset generation: the directive ensures that an appropriately sized image is requested by generating the srcset attribute for you. This can reduce download times for your images.
  • Fill mode [experimental]: this mode causes the image to fill its parent container, removing the requirement to declare the image’s width and height. I

t’s a handy tool if you don’t know your image sizes or if you’d like to migrate CSS background images to use the directive.

CLI improvements

Angular 15 removes test.ts, polyfills.ts, and environments to reduce the configuration when we use ng new .

You can now specify your polyfills directly in angular.json in the polyfills section:

Angular 15 removes test.ts, polyfills.ts, and environments to reduce the configuration when we use ng new

Deprecation in Angular 15

provideIn: 'any' and provideIn: NgModules are deprecated because they are not really used by the community.

Upgrade to Angular 15

To upgrade to Angular 15, you will need to follow a few steps:

1. Make sure you have the latest version of the Angular CLI installed. You can check your version by running the following command:

Angluar 15 - Adservio

2. If you don't have the latest version of the Angular CLI, you can install it by running the command below:

Angluar 15 - Adservio

3. Next, navigate to your Angular project directory and run the following command:

Angluar 15 - Adservio

This will update the Angular CLI and the core Angular libraries to the latest version.

4. After the update is complete, you should run the following command to update your project's dependencies:

Angluar 15 - Adservio
  1. Finally, you will need to make any necessary changes to your code to ensure it is compatible with the new version of Angular. This may include updating deprecated APIs, changing the way you import certain modules, or updating your build configuration.

Don’t forget that it is always a good idea to thoroughly test your application after an upgrade to ensure everything is working as expected.

Published on
December 29, 2022

Industry insights you won’t delete. Delivered to your inbox weekly.

Other posts