Angular 15 new must-know features!

Bulruno
2 min readDec 1, 2022

--

Whats new?

  1. Stable standalone components API

Standalone components API was introduced in angular 14 without definig in module. In this version it finally builds upon by improving performance and stability.

2. Enablement to develop multi route application.

It comes with a router standalone API to build the multi-route application. Here’s how you can declare the root route.

Here, lazyRoutes are declared in the and provideRouter API can be used to bootstrap the route.

3. Introduction to Directive Composition API

All developers love when their favorite framework offers top-notch reusability of directives. In the GitHub community, many Angular developers were asking for this API and finally, the team heard it and made is possible.

So, Angular v15 is finally infused with that inspiration from the feature request made on github. It has introduced Directive Composition API, which elevates the code usability to takes it to another level.

As you can see above, the MatMenu is made effective with the help of two hostDirective.

Because of this enhancement, MatMenu can reutilize all properties from these two directives. MatMenu can be inherited with inputs, outputs and logic associated with has

4. Stable NgOptimizedImage Image Directive

5. Reduce boilerplate in Guards [Functional Router Guards]

Let’s understand this concept in a better way with one example of defining guards, verifying details, whether the user has logged in or not.

Thanks to Functional Router Guards, this code can be refactored into the given-below code with the necessary boilerplates.

6. Cleaner, Better Stack Traces

With Angular v15 update, you will find debugging applications cleaner.

7. Stable MDC based Components

As the stability is concerned for Angular materials, angular development team worked hard to refactor its component based on angular material design Components for the web applications. Furthermore, these components are enhanced to offer better acccessibility and abidance to angular material design specifications.

Here, most of the refactoring work has been done in DOM and CSS parts.

8. CDS Listbox

CDK stands for Component Dev Kit that offers different behavior primitives, helping in building UI components. In angular v15, it gets new primitive called CDK Listbox, enabling developers to customize Listbox interactions drawn up by WAI-ARIA Listbox pattern based on requirements.

9. Extended esbuild support

In angular 14 updaet, there was enablement to an experimental support esbuild — a faster javascript bundler, enabling quick build done with simplifhing in the pipeline

10. Other enhancements

— Router now auto-unwarps default exports for lazy loading: it simplifi

  • Automatic imports in-language support service — quick fix: now write your angular code in more confidently by making

--

--