Angular 15 Features

Angular, the most in-demand, open-source front-end framework, finally drops in yet another version update – Angular 15. Previously, Angular 14 introduced many new exciting experimental features and arrayed code best practices but it seems like this new roll-out Angular version 15, is all about gaining stability. Finally, a new stable update, which we all tech enthusiasts and the Angular community were waiting for. This new update has brought massive thrilling changes. So, let’s dive into the new world of Angular 15. What New Features That Angular 15 Has Introduced? In reference to other previous updates and the removal of Angular’s legacy compiler, the Angular 15 update brings many new refinements – stability and extended supportability, that definitely promises to unlock elevated developer experience and performance. Stable Standalone Components API The standalone components API was introduced in Angular 14 to build Angular applications without defining the NgModules. In Angular 15, the standalone components API finally achieves their degree of stability after thorough performance observation and amendments. The Angular developer community has made sure that with this newly achieved stability, standalone components can work in sync with HttpClient, Angular Elements, and many others. Use this standalone API to bootstrap an application in a single component. Here’s how it is done: Using the imports function, you can even reference standalone directives and pipes. You can now mark components, directives, and pipes as “standalone: true” – now, no need to declare them into NgModule, else the Angular compiler will throw an error. Additionally, you can now import NgModule directly inside the standalone component by writing import: [module_name]. Enablement to Develop Multi-Route Application Angular 15 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 following way: You can register the appRoutes in the bootstrapApplication method and call it using the ProvideRouter API, which is tree-shakable! Additionally, Angular Bundlers can now remove the unused features at the build time, which can result in an 11% reduction in the code file size. 3. Introduction to the 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 it 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 and takes it to another level. It allows developers to boost host elements with directives and make the most of Angular with the help of the ultimate code reuse strategy. Additionally, all of this can be made possible with the help of an Angular compiler. NOTE: You can only make use of the Directive Composition API with standalone directives. As you can see above, the MatMenu is made effective with the help of two hostDirectives: HasColor and CdkMenu. Because of this enhancement, MatMenu can reutilize all the properties from these two directives. MatMenu can be inherited with the inputs, outputs, and logic associated with the HasColor directive and only logic and input from CdkMenu. It may give you a feeling like Deja Vu for the multiple inheritance concept. The difference Angular has from other programming languages is the resolution of name conflicts, and it only applies to user interface primitives. Stable “NgOptimizedImage” Image Directive The NgOptimizedImage directive was introduced in the previous version to easily adopt best practices for loading image performance. Finally, after a lengthy observation of developers, this directive has achieved a stable form.The latest experiment done by Land’s End with this feature for one application has observed a 75% improvement in the LCP (Largest Contentful Paint) image loading. Previously, this NgOptimizedImage was also offering many features and functionalities, but Angular v15 updates add more new exciting features in the image directive, which are as follows: Automatic srcset Generation: It automatically generates srcset, which ensures to upload an appropriately sized image when requested – resulting in a reduction in the image download time. Fill Mode [experimental]: It eliminates the need for declaring image dimensions and fills an image to its parent container. This mode is pretty effective when the image dimensions are unknown to you or you need to migrate the CSS background image to make use of the image directive. But the question is, “how to use this standalone NgOptimizedImage directive?” It can be directly used in your Angular component or NgModule. When using this Angular image directive within a component, all you need to do is replace the image src attribute with ngSrc, while ensuring to specify the priority attribute to optimize the speed for the LCP images. Now You Can Reduce Boilerplate in 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: Here, in this program, LoginService contains the main logic, wherein the guard – only one trigger is invoked, which is  isLoggedIn (). Although having such a clear structure, this code segment has many boilerplates, which must be reduced. Thanks to Functional Router Guards, this code can be refactored into the given-below code with the necessary boilerplates. The best thing about Functional Guards is that they are compostable. With its help, you can build factor-like functions, accepting a given configuration and returning a guard or function that resolves a matter. Cleaner, Better Stack Traces With the Angular v15 update, debugging Angular applications has been simplified and made cleaner and straightforward with stack traces. The Angular developers’ team ensured to achieve a standard to trace more of a development code than showing libraries it calls. This achievement has made it possible for the error messages to use some improvements. Before working with the previous Angular versions, when discovering a code, developers used to get one-liner error messages, leading them to a lengthy process to solve that bug. Below is the snippet for previous error indications: The difficulty in understanding