Angular 15 Find Major Features and Deprecations from the Update
Radhika Yadav
Radhika Yadav

Angular 15: Find Major Features, and Deprecations from the Update

Angular v15 has been released!

Angular has become one of the most popular front-end frameworks for building dynamic web apps. The framework is open-source and maintained by Google, boosting its reliability. Today 1,20,000 + websites are running on the angular framework, made possible by google through continuous maintenance and updates in the framework.

The recent angular 15 version 15 has further carried the legacy of the open-source market and taken the front-end development further. Here are the refinements announced in Angular v15 leading to a better developer experience and performance.

What’s New in Angular v15?

Angular 14 bought a number of features and updates to boost the development experience. Now, Angular Version 15 takes it to a new level. Let us look at what Angular v15 brings.

Stable Standalone APIs Are Out Now

Standalone APIs are not new since it was announced in v14. But the APIs were not a part of the stable API surface. With Angular v15, the standalone APIs are now stable APIs providing a platform to further enhance them in the near future. Angular Developers can now run APIs in HttpClient, routers, elements, and more. With a single component, standalone APIs allow developers to bootstrap applications.

Standalone APIs

Multi-Route App Using New Router Standalone APIs

Building a multi-route application using the new router Standalone APIs is easier with the new Angular v 15. Here is an example:

  1. Declaring the root route

Declaring the root route

  1. lazyRoutes declaration

lazyRoutes declaration

  1. Registering the appRoutes while calling bootstrapApplication

Registering the appRoutes while calling bootstrapApplication

Benefits offered by provideRouter API

  • The API is tree-shakable, where Bundlers clear unused features during the build.
  • 11% reduction in the size of router code

Efficient Code Reuse with Directive Composition API

With the new Directive composition API, developers can efficiently reuse the code. The feature is announced after massive requests from the GitHub community asking to add directives to a host element. However, the directive composition API only works with standalone directives.

In below code we showcase:

  1. Enhancing MatMenu with HasColor and CdkMenu
  2. MatMenu reuses the code from elements mentioned in 1.

MatMenu

Stable Image Directive

Until now, the image directive was in the developer preview. Angular v15 makes Image Directive stable for the developers bringing a 75% improvement in LCP.

Stable Image Directive

New features in Angular v15 Image Directive:

  • Automatic scrset generation reduces the download time for images.
  • Automatic declaration of image attributes through parent container
  • Directly using standalone NgOptimizedImage in NgModule or component. Here is an example:

New features in Angular v15 image directive

To use within a component (Source):

  1. Replace attribute scr with ngSrc in the image.
  2. Specify priority attribute for LCP images

CDK List for Building UI Components

The Component Dev Kit or CDK is highly used by Developers to build behavior primitives for UI components. With the recent v 15, the Angular team added another primitive- CDK Listbox.

CDK List for building UI components

Boilerplate Reduction in Guards

The angular team worked on reducing boilerplate in guards.

In the below example, we showcase how to define a guard that verifies logged-in users:

guard that verifies logged-in users

Let us write the same code after refraction:

same code after refraction

Improvements in esbuild for Faster Builds

To simplify the pipelines, the Angular team bought experimental support for esbuild with Angular v14. With Angular version 15, the team now offers support for Sass, file replacement, SVG template, and ng build –wach.

Angular 14:

Angular 14

Angular 15:

Angular 15

Automatic and Faster Component Import

Angular version 15 brings automatic importance to language service. The components used by Developers are now automatically imported into the template without the requirement to add a standalone component or NgModule.

showing how you can automatically import components you’re using in the template with the Angular language service

Other Latest Contributions

Steps towards simplicity of coding

The angular team has announced a few deprecations:

  • providedIn: ‘any’
  • providedIn: NgModule
  • No more publishes of @angular/flex-layout

Priority images load faster

The image directive functionality of including a <link rel=”preload”> will make sure that images set on priority load faster. Also, the directive automatically preloads the specified image.

Efficient stack tracing

Angular developers struggle on a daily basis while debugging. After partnering with Chrome DevTools, the overall stack tracing has become efficient with Angular v15.

What Comes Next?

The Angular community has raised the bars to a new level with Angular V 15. We are actively waiting for what the Angular team brings next in the near future to amplify the development experience of developers.



Connect with us to discuss your Project.

Contact Us
SHARE
WRITTEN BY
Radhika Yadav

Radhika Yadav

Content Strategist

Radhika finds covering the tech world to be an exciting and engaging experience as each day brings new and groundbreaking technologies to explore and write about. A believe that words are our most inexhaustible source of magic, makes her fortify to writing pieces that enhance the visibility of any brand and helps them position themselves in the best possible way.

View All Articles
subscribe_2

subscribe Subscribe Newsletter

Get updated with our weekly blogs and expand your technical knowledge with our in-depth content

Related Blogs

Explore this space to stay tuned to our latest blog post.

Ishan Gupta
Ishan Gupta in iOS

How far has Apple gotten with the FAROUT Event for iPhone 14 Series, Apple Watch Series 8, & AirPods Pro?

Apple has focused on innovating together to change
people's lives with its unique integrat....

Radhika Yadav
Radhika Yadav in Mobile Application Development

RBI Allows Credit Card & UPI Linking- UPI & UPI Apps to Dominate in India

The government of India has been on a mission to
make India a cashless economy by supporti....

Prankur Haldiya
Prankur Haldiya in iOS

Apple’s WWDC June 2022- Everything Announced at Event

On 6th June, Tim Cook kicked off Apple’s WWDC
2022 event The event delivered innovative ....