What’s new in Angular 15? Latest Features and Quick Updates of Angular V15

4 min readDec 8, 2022

What’s new in Angular 15 ? Do you know Angular 15.0.0 set foot in the tech market? It’s the biggest release with several enticing improvements and features! According to Angular’s release policy, it keeps coming forward with different updates every 6 months since its last update.

This new Angular 15.0.0 has stable standalone APIs, directive composition API, seamless performance, minimum boilerplate code, and so on. As it’s already launched in the market, today, in this guide, we will dive right into the brand-new features of Angular 15 and other nitty-gritty factors. So, after understanding the Angular versions history, let’s get straight to the latest version of Angular 15.

The Latest Features of Angular 15

Image Directives

Pictures are considered one of the most vital web experience components. Users will be greatly pleased with your service if they load at lightning speed. That’s the reason your website will generate a significant amount of revenue. Therefore, the R&D team of Angular got together with the image directives in order to provide a maximized core web vital benchmarks and enhanced user experience.

Standalone components are reliable

With Angular 15, it’s now possible to create different Angular applications without modules in case you want to. Some of the biggest developments incorporated in Angular 15 are the following:

In this newer version, HttpClient is available for testing; you can use provideHttpClientTesting(), and… To test router-based components, use the provideLocationMocks() function:
Due to the expansion of HTTP support, you can now supply an HTTPClient without using an HTTPClientModule by using provideHttpClient.

NgFor is the new name of the NgForOf directive, making it hassle-free to bring it in brand-new standalone components. Likewise, NgFor, there were RouterLinkWithHref and RouterLink directives, which have now combined into one structure. So, there is no requirement to import it.

In case you use RouterLinkWithHref, a schematic will quickly transform the code.

The language service, which was once used in the IDE for type checking and autocompletion, has been vastly enhanced for constituent components. Moreover, if you utilize a standalone command, element, or pipe in its design, it immediately offers to integrate it into your component.

Directive composition API

Another best-in-class feature of Angular 15 is directive composition API maximizes the reusability of the codes to a whole new level. Such an extraordinary feature was stimulated by GitHub’s renowned feature request demanding the functionality of a host element to which directives are added.

Developers may utilize the directional composition API to add directives to host components, giving Angular a strong code repurposing technique only made feasible by an interpreter. Remember that only solitary directives are compatible with the API for directive compilation. You may consider this:

Ultra-fast speed of Angular due to Ivy Landmark

Are you well-versed with Angular Saga? It used to be the top-notch framework to emphasize UX. But it has been struggling with poor build performance in contrast to flimsy libraries, such as React. The graphics engine was rebuilt in an incredible attempt to get everything back on the right path. The brand-new one, designated Ivy, took years to complete.

While considering the process, Angular had to be removed from Hot Module Reload. Luckily, the newest Angular version 15 provides several builds & rebuilds, which are subtle, and Ivy has paved the way to strengthen Angular.

In case you don’t know, enabling Hot Module Reload has also become straightforward. Simply put, Angular 15 will be a turning moment. Ivy will eventually replace all other rendering engines, providing programmers with superior user engagement.

Seamless Lazy Loading

Another remarkable feature of Angular 15 is that it makes lazy loading feasible. Don’t know what lazy loading is? This technique, called lazy loading, puts non-crucial resources on the pages only when they are absolutely needed.

With the most recent updates, it considers standard exports and loads only necessary instead of forcing you to choose what to load when loading a module or child in an angular path.

CSS Keyframes

Keyframes in CSS had an issue, which was that no scoped component seems to be involved. This problem has been a focus of the angular team’s efforts since 2019. While considering this limitation, the Angular 15 version has been released as a permanent solution.

The host selector will have the keyframe name associated with it. It’ll adhere to Angular’s component scope. If your code depends on a keyframe’s longer perspective, this change may cause it to malfunction. You must add them to the public stylesheet.

Conclusion

The release of Angular 15 is November 16, 2022, and these are the latest features and updates of Angular 15. This framework is one of the greatest open-source platforms. The Angular team has pleased the developers by providing these top-notch advantages and features incorporated in the latest version of Angular V15.Do you need a team of professional developers at your disposal? Hire full stack developers with Angular specialization to upgrade your app from Angular 14 to Angular 15.

Originally published at https://www.c-metric.com on December 8, 2022.