Angular 15

Introduction:

        The Angular Team at Google has kept the latest Angular 15 release date on November 16, 2022. The Team has involved numerous features and updates with the latest version to deliver a better developer experience and performance. Though with the previous Angular version release, the Team brought many exciting changes. But the latest version of Angular 15 Features and Updates has not lacked in any sense to grab the attention of developers, business owners, and tech enthusiasts.

What's New in Angular 15 Features and Updates:

        With the Angular 14 release, the Angular Team officially mentioned that removing Angular’s legacy compiler and rendering pipeline significantly improved the developer experience. Similarly, considering Angular 14 vs Angular 15. The latest Angular 15 New Features include stable standalone APIs, allowing Angular developers to build apps without the Ng Modules. It also offers less boilerplate code, enhanced performance, directive composition API, and many other updates and features for developers in terms of experience and performance. Let us now discuss in detail, the Top Angular 15 Features and Updates that have taken the developer community by surprise.

Standalone API (Now, Gradated and out of Developer Preview):

• Angular Team introduced the Standalone API with Angular 14, allowing developers to build applications without using Ng Modules. Now in Angular 15, it has graduated from the Developer preview and has become stable.
• The Angular Team ensured that the standalone APIs were ready to graduate and that the standalone components worked across Angular. They are now fully working in HttpClient, Angular Elements, router, and more.
•  In Angular 15, using the standalone components allows working in synchronization with the HTTP with client routers, angular elements, and many more.
• Standalone APIs Allows the Creation of Multi-Route Application:
• Now you can build a multi-route application using the new router standalone APIs.
• Also, bundlers can reduce the bundle size by around 11% by removing the unused features from the router at the build time.

Better Stack Traces:

  Now, you can trace the code efficiently and simply using the Stack Trace; this feature contributes when facing any error and helps find where this error is experienced or found.

Other Improvements:

   The Range Selection Support in the Slider is the fourth most upvoted issue within the community.

Use the below-given code to get the range input:

    <mat-slider>

      <input matSliderStartThumb>

      <input matSliderEndThumb>

    </mat-slider>

Upgrading from Angular 14 to Angular 15:

• For Angular v15, update your Node.js versions to either of the ones 14.20.x, 16.13.x and 18.10.x.
• Update your TypeScript version to 4.8 or later before upgrading to Angular version 15.
• Run ng update @angular/core@15 @angular/cli@15 in the application project directory to update your application to Angular 15
• Then, to update the Material components Run ng update @angular/material@15
• For version 15, the Angular compiler prefixes the @keyframes in CSS with the component’s scope. Hence, TypeScript codes relying on the keyframes names will not function in v15. Update all such instances to Define Keyframes programmatically, use global stylesheets, or change the component’s view encapsulation.
• In the tsconfig.json file, remove enableIvy as it is the only rendering engine in Angular 15, so it is not required.
• Use decorators in base classes with child classes that inherit constructors and use DI. Such base classes should be decorated with either @Injectable or @Directive otherwise, the compiler show error.
• In Angular 15, the setDisabledState is called when a ControlValueAccessor is attached. To avert using the same behavior, use FormsModule.withConfig or ReactiveFormsModule.withConfig.
• Ensure that all ActivatedRouteSnapshot objects have a title property. In v15, the title property is a required property of ActivatedRouteSnapshot.
• In version 15 of Angular, relativeLinkResolution is not configurable in the Router. It was used to opt-out of an earlier bug fix that is now standard.
• Update instances of Injector.get() that use an InjectFlags parameter to use an InjectOptions parameter. The InjectFlags parameter of Injector.get() is deprecated in v15.
• Update instances of TestBed.inject() that use an InjectFlags parameter to use an InjectOptions parameter. The InjectFlags parameter of TestBed.inject() is deprecated in Angular 15.
•  In Angular Material v15, many of the components have been refactored to be based on the official MDC which affects the DOM and CSS classes of many components.
• After you update your application to Angular 15, visually review your application and its interactions to ensure the smooth functioning of all the features and the application.

Conclusion:

        So, this is what the Angular Team at Google has brought for the developers and their community. With this Angular 15 version, they have done a great job and have significantly considered the inputs and requests of the developers since the previous version of Angular. With this, we can infer and conclude that the latest Angular 15 Features and Updates mainly concentrate on Stability and enhancing the developer experience and performance along with many other new updates. Sure, there is a lot more to come in the upcoming days, and we will see many expected and unexpected improvements from the Angular Team.