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:
In this article we will take a closer look at these improvements.
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:
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.
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:
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:
With Angular 15;
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 :
Where myLazyRoutes are declared in;
and finally, register the appRoutes in the bootstrapApplication call;
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%.
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:
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:
New image directive features:
Angular 15’s release also includes a few new features for the image directive:
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.
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:
Deprecation in Angular 15
provideIn: 'any' and provideIn: NgModules are deprecated because they are not really used by the community.
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:
2. If you don't have the latest version of the Angular CLI, you can install it by running the command below:
3. Next, navigate to your Angular project directory and run the following command:
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:
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.