What’s New in the Latest Version of Angular V15?

The newest version of Angular, Angular 15, was released on November 16, 2022, according to the Angular Team at Google. The Team has included several changes and additions in the current version to improve the performance and experience for developers. 

Yet, the Team accomplished numerous exciting things with the most recent Angular version. However, Angular V15 has not been lacking in features or updates that would interest programmers, company owners, or tech specialists.

What's New With Angular 15's Features and Updates?

The Angular 14 release was the first time the Angular Team had publicly acknowledged that the elimination of Angular's old CompilerCompiler and rendering pipeline had resulted in a far superior experience for developers. 

Similar thoughts occur when comparing Angular 14 with Angular 15. The latest Angular V15 New Features include reliable, standalone APIs that free Angular developers from needing Ng Modules. 

Reduced boilerplate code, more speed, a directive composition API, and many other enhancements and new features are just some of what it offers developers. Let's dive into the top features and updates in Angular development services that have impressed developers the most.

Standalone API (Now, Gradated and Out of Developer Preview)

• Apps may now be developed independently of Ng Modules thanks to the Standalone API, which was made accessible by the Angular Team beginning with Angular 14. Previously known as a Developer preview, Angular V15 is now a stable release.
• In preparation for its release, the Angular Team rigorously tested all of the APIs and components that might be used independently. They used to function partially, but now you can use them with everything from HttpClient to Angular Elements to a router.
• Separate components may be used in Angular V15 to coordinate HTTP requests with client routers, Angular elements, and more.
• Because it has matured to the point where a single component can launch a whole application, this opens up many possibilities. Similarly, we can bring the bootstrap app over to the element by importing it straight from the platform browser. Additionally, we may set the standalone property of the component pipe and the standalone property of the directive to true by importing the standalone reference.

Standalone APIs Allow the Creation of Multi-Route Application

• Incorporating several routes into a single application is now possible with the newly released Router standalone APIs.
• Also, bundlers may cut the bundle size by around 11% by disabling the Router's useless functionalities during construction.

Directive Composition API

• The most requested feature on GitHub has finally made its way into the current Angular V15 release.
• That's a handy tool for facilitating code reuse.
• It enables the developers to save time by reusing code while creating the Angular application and increasing the number of host components with the directives.
• The Angular CompilerCompiler provides standalone directive support for the directive composition API.
• All directive declarations go within this section, making Directive Composition an available API function.

Image Directive (NgOptimized Image) Is Now Stable

• Now that Angular 14 and Chrome Aurora are both available in v14.2, the Image Directive (Ngoptimized Image) was added.
• The largest Contentful Paint (LCP) at Land's End's experimental lighthouse lab increased by almost 75%.

The Image Directive in the New Angular 15 Features Also Includes:

• The picture download time may be decreased by using an automated srcset generation directive, which creates the SRC set automatically to aid in uploading and suitably sizing the image wherever required.
• Fill Mode (Experimental) will adjust the image's dimensions automatically to fill the parent container. Incorporating this directive into the CSS background image migration process is highly recommended.

While the NgOptimized image directive is often used in an Angular component or Ng module, it may also be used directly in the app.

import { NgOptimizedImage } from '@angular/common';

// Include it into the necessary NgModule

@NgModule({

  imports: [NgOptimizedImage],

})

class AppModule {}

// ... or a standalone Component

@Component({

  standalone: true

  imports: [NgOptimizedImage],

})

class MyStandaloneComponent {}

Functional Router Guards

• Using the tree-shaking standalone router APIs, the Angular Team has been working to reduce boilerplate by reworking the code, resulting in a smaller Angular package size thanks to the addition of Functional Router Guards.

The Router Unwraps Default Imports

• With the addition of auto-unwrapping for default outputs and lazy loading, the Router has become even easier to use and has helped cut down on unnecessary boilerplate.

Better Stack Traces

• By utilizing the Stack Trace, you can now easily and quickly determine the exact location of a mistake in the code and how to fix it.

By seeing developers' plights while debugging, this function was introduced.

Stable MDC-Based Components

• The Refactoring of Component-Based Systems is Intense up till version 14. MDC makes it possible to work with angular Material (Material Design Component for the Web).
• Each new component in Angular V15 Features has a deprecated older implementation that can be accessed using a 'legacy' import.

Other Improvements

• One of the most popular suggestions is to add a range selection option to the slider.

If you want to receive the range input, use the following code:

<mat-slider>

<input matSliderStartThumb>

<input matSliderEndThumb>

</mat-slider>

CDK (Component Dev Kit) Listbox

• The CDK provides several primitives for implementing behavior and aids in developing UI parts. CDK Listbox is a new Angular primitive that allows for individualized Listbox interactions as defined by the WAI-ARIA Listbox standard.

Automatic Language Service Import

The components utilized or required by the template may now be imported by the language service, even if they have yet to be made available as a separate component or Ng Module.

Extended esbuild Support:

• To facilitate quicker build times and simplified pipelines, esbuild experimental Support was revealed in Angular 14 in ng build.
• The new save as SVG template, file replacement, and ng builds — watch Support in Angular 15 make this possible.

How To Upgrade From Angular V14 To Angular V15

• Choose the Alternatives that meet your needs.
• Click the "Show me how to Update" option.

Upgrading From Angular 14 To Angular 15

• Angular v15 is compatible with Node.js version 14.20.x, 16.13.x, and 18.10.x.
• Check that TypeScript is at least version 4.8 before upgrading to Angular 15.
• To bring your app up to date with Angular 15, execute ng update @angular/core@15 @angular/cli@15 in the application project directory.
• Finally, we need to revise the Material parts. Update @angular/material@15 using ng update.
• Version 15 of the Angular CompilerCompiler adds the component's scope prefix to the CSS @keyframes. Therefore, in V15, keyframe names cannot be used in TypeScript. Change the view encapsulation of the element or update all occurrences of Define Keyframes in the code.
• As the sole rendering engine in Angular 15, removing enable from tsconfig.json is unnecessary.
• Decorators should be used in base classes with constructor inheritance and DI. The CompilerCompiler will only throw an error if such base classes are annotated with @Injectable or @Directive.
• For disabled states, Angular 15 uses setDisabledState once a ControlValueAccessor has been applied. Instead of repeating yourself, use FormsModule. With config or ReactiveFormsModule. with config.
• To do this, you must check that the title property is set on each ActivatedRouteSnapshot object. The title is a mandatory V15 attribute of ActivatedRouteSnapshot.
• Due to a lack of Support in the Router, relativeLinkResolution cannot be modified in Angular 15. It allowed users to avoid a now-standard bug patch.
• To configure the time zone, replace all occurrences of the DATE PIPE DEFAULT TIMEZONE token with DATE PIPE DEFAULT OPTIONS. DATE PIPE DEFAULT TIMEZONE is an obsolete token as of version 15.
• There is a possibility that existing instances of iframe > will have security-relevant characteristics bound to them as attributes or properties. These potentially dangerous features might be present in the host bindings of a directive or a template. When this happens, upgrading to the latest version is essential to follow the more stringent standards for iframe > bindings.
• Replace all occurrences of Injector. Get (InjectFlags)'s argument with injections. V15 removes Support for the InjectFlags Injector. get() view.
• Any applications of TestBed.inject are encouraged () that previously accepted an InjectFlags argument be updated to take an InjectOptions parameter instead. TestBed.inject(InjectFlags ) 's option is obsolete as of Angular 15.
• In version 15, it is no longer recommended to use provided: ngModule with a @Injectable and InjectionToken.
• In V15, it is no longer recommended to use provided: any with a @Injectable or InjectionToken.
• Replace all occurrences of RouterLinkWithHref with RouterLink. Deprecated as of Release 15 is the RouterLinkWithHref directive.
• Components in Angular Material v15 have been refactored based on the official MDC, which has implications for their DOM and CSS classes.
• If you've just upgraded to Angular 15, it's a good idea to do a visual inspection of the application and its interactions to make sure everything is running well.

Conclusion

What the Angular Team at Google has delivered to the programming world. They have done a fantastic job with Angular 15, taking developer feedback and suggestions into careful consideration. 

Based on this, Angular 15's important goals include enhancing stability, developer productivity, and performance. We may expect both anticipated and unanticipated enhancements from the Angular Team shortly.

The time to start learning Angular if you are a product owner and have a project in the works for which you want to utilize it is now.