What’s New in Angular 15? All About New Must-Know Features & Updates

 

Published On:

  November 30, 2022
Read Time 14.33 Minute Read
Copy
var promise = new Promise((resolve, reject) => {
    resolve(“Promise Resolved”);
})
promise.then((success) => {
    console.log(success);
})
.catch(function(error) => {
    console.log(error);
});
// Output: Promise Resolved
What’s New in Angular 15? All About New Must-Know Features & Updates

Angular is an in-demand and open-source framework that has come up with astonishing updates of the new version. Yes, you read it right.

Angular 15 is now live.

After the successful launch of Angular 14, Angular 15 is back with more and more exciting updates to bring convenience to Angular developers in building robust applications.

Yeah, I know you all are too enthusiastic to see what’s new in Angular 15. So, let’s start to see what new updates have been introduced in the latest Angular version 15.

What is New in Angular 15?

Angular 15 release date is 16th November 2022 and brought a big smile to Angular developers (including me) globally. The reason was quite obvious as they were expecting something big to announce and it really happened.

Angular 15 came with some limelight and interesting features like

  • Stable standalone components API
  • Develop a multi-route application
  • Directive Composition API
  • Stable “NgOptimizedImage” Image Directive
  • Easily Reduce Boilerplate in Guards
  • Better Stack Traces For Debugging Process
  • CDK Listbox
  • ESBuild Support of Angular 15

Sounds interesting, Right. These are the major updates that are introduced in the Angular 15 version. We’ve highlighted detailed information on all such major features of Angular latest version 15. In this article, I hope that you have a clear idea of what is Angular and what it’s main used for.

Develop User-Friendly Web Applications with Angular 15

We have a team of Angular developers who are proficient in developing web and mobile apps using Angular version 15.

What are the Angular 15 Features?

Yeah! I know you all are too much excited to know about the inspiring features that are introduced in Angular 15. Let’s get a deep dive into all the technical aspects of current Angular version 15.

  1. Stable Standalone Components API

    In Angular v15, the first and most important feature that has been updated is stable standalone components API.

    You can quickly build Angular applications without any involvement of ngModules. Moreover, it is one of the best examples of gaining stability after detailed performance observation and amendments.

    If you’re entirely new to development or have a basic knowledge of JavaScript, Angular 15 is the best front–end development tool for learning Angular development practices.

    And if we talk about Angular standalone components, you can efficiently work with them across Angular applications. Moreover, they are 100% functional in Angular elements, HttpClient, Routes, and many more.

    The exciting part of Angular 15 is that you can quickly bootstrap an Angular app using only a single component.

    Throughout this article, we will demonstrate the examples taken from [Official documentation]

    How to use standalone API in Angular 15? To answer this question, please have a look at the below code.

    Copy
    import {bootstrapApplication} from '@angular/platform-browser';
    import {ImageGridComponent} from'./image-grid';
    
    @Component({
     standalone: true,
     selector: 'photo-gallery',
     imports: [ImageGridComponent],
     template: `
       ... <image-grid [images]="imageList"></image-grid>
     `,
    })
    export class PhotoGalleryComponent {
     // component logic
    }
    
    bootstrapApplication(PhotoGalleryComponent);

    In the above code, you can see that it mentions “standalone: true”. That’s an example of a standalone components API. So, you do not have to declare components, directives, and pipes into NgModule. If you do that mistake, get ready to receive a big error on your screen.

    In case, if you want to import NgModule in your standalone components of Angular application, do it by simply writing import: [module_name] and you are good to go. Often, there exist many advantages to using the Angular framework, but Angular 15 possess more functionalities as compared to previous versions.

  2. You Can Now Easily Develop a Multi-Route Application

    Yes, you read it right. Angular 15 is now ready with an essential functionality named router standalone API that makes it easy for you to build multi-route applications.

    First, let’s declare the root route for your Angular application.

    Copy
    export const appRoutes: Routes = [{
     path: 'lazy',
     loadChildren: () => import('./lazy/lazy.routes')
       .then(routes => routes.lazyRoutes)
    }];

    Next, you can declare lazyRoutes as:

    Copy
    import {Routes} from '@angular/router';
    
    import {LazyComponent} from './lazy.component';
    
    export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

    Remember that you have to register the appRoutes in the bootstrapApplication method and call it using the ProvideRouter API, which is tree-shakable!

    Copy
    bootstrapApplication(AppComponent, {
     providers: [
       provideRouter(appRoutes)
     ]
    });
  3. Angular 15 Comes With Directive Composition API

    All Angular developers working with leading AngularJS development company, including me, were waiting for a feature where we could easily reuse the directives. And that’s what the Angular team made possible for us by including Directive Composition API and made our development experience smooth.

    Want to know how? Directive Composition API enhances code usability and boosts host elements with directives. However, always remember that Directive Composition works only with standalone directives.

    Copy
    @Component({
     selector: 'mat-menu',
     hostDirectives: [HasColor, {
       directive: CdkMenu,
       inputs: ['cdkMenuDisabled: disabled'],
       outputs: ['cdkMenuClosed: closed']
     }]
    })
    class MatMenu {}

    You can see from the above code that the “MatMenu” selector has two hostDirectives: HasColor and CdkMenu.

    It means that MatMenu can reutilize all the properties from these two directives. Simply put, it can be inherited with the inputs, outputs, and logic associated with the HasColor directive and only logic and input from CdkMenu.

  4. Stable “NgOptimizedImage” Image Directive

    In the Angular 14 version, we’ve seen that one of the best ways to load image performance was by using the NgOptimizedImage directive. But it’s good news for Angular developers that it has become stable now.

    With the launch of Angular 15, there are some minor updates in NgOptimizedImage

    • Automatic srcset Generation: You can now automatically generate srcset for uploading an appropriately sized image when requested. It’s going to minimize the image download time.
    • Fill Mode [experimental]: This feature of Angular 15 eliminates the need for declaring image dimensions and will fill an image to its parent container. Trust me; it’s a pretty compelling model when the image dimensions are unknown to you or you need to migrate the CSS background image to use the image directive.

    Now, let’s see how we can use the standalone NgOptimizedImage directive.

    You can use NgOptimizedImage inside your Angular component or NgModule.

    Copy
    import { NgOptimizedImage } from '@angular/common';
    
    // Include it into the necessary NgModule
    @NgModule({
     imports: [NgOptimizedImage],
    })
    class AppModule {}
    
    // ... or a standalone Component
    @Component({
     standalone: true
     imports: [NgOptimizedImage],
    })
    class MyStandaloneComponent {}

    You just have to replace image src with ngsrc, especially when you’re using an Angular image directive within a specified component. It plays a vital role in determining the priority attribute to optimize the speed for the LCP images.

  5. Easily Reduce Boilerplate in Guards

    It’s a practical concept. So, let’s dive deep into the example without taking much time. First, we’ve defined guards to verify whether the user has logged in.

    Copy
    @Injectable({ providedIn: 'root' })
    export class MyGuardWithDependency implements CanActivate {
     constructor(private loginService: LoginService) {}
    
     canActivate() {
       return this.loginService.isLoggedIn();
     }
    }
    
    const route = {
     path: 'somePath',
     canActivate: [MyGuardWithDependency]
    };

    Here, you can see that LoginService contains the main logic, wherein the guard – only isLoggedIn() is one trigger invoked. As many boilerplates are included in this code segment, we need to reduce it to the maximum.

    Thanks to Functional Router Guards, you can easily refactor code into the given-below code with the necessary boilerplates.

    Copy
    const route = {
     path: 'admin',
     canActivate: [() => inject(LoginService).isLoggedIn()]
    };

    One of the excellent parts about Functional Guards is that they are purely compostable. So, it brings convenience to you in many ways, including building robust functionalities like factor-like functions, accepting a given configuration and returning a guard or function that resolves a matter.

  6. Better Stack Traces For Debugging Process

    With the launch of the latest version of Angular, debugging Angular applications has been simplified and is now more straightforward with stack traces. Angular’s development team strives to achieve a standard for tracing development code irrespective of displaying libraries during the entire Angular development lifecycle.

    The primary aim of developing such stack traces is to improve the display of error messages as they come by. For example, developers get a one-liner error message during the code discovery phase if we talk about the previous versions of Angular. And a lot more to deal with the lengthy procedure to resolve that bug.

    First, let’s see the snippet for previous error indications:

    Copy
    ERROR Error: Uncaught (in promise): Error
    Error
       at app.component.ts:18:11
       at Generator.next (<anonymous>)
       at asyncGeneratorStep (asyncToGenerator.js:3:1)
       at _next (asyncToGenerator.js:25:1)
       at _ZoneDelegate.invoke (zone.js:372:26)
       at Object.onInvoke (core.mjs:26378:33)
       at _ZoneDelegate.invoke (zone.js:371:52)
       at Zone.run (zone.js:134:43)
       at zone.js:1275:36
       at _ZoneDelegate.invokeTask (zone.js:406:31)
       at resolvePromise (zone.js:1211:31)
       at zone.js:1118:17
       at zone.js:1134:33

    Developers were not able to understand the ERROR snippets due the following reasons:

    • Third-party dependencies were solely responsible for such error message inputs.
    • You were not getting any information related to where such user interaction encountered this bug.
    • With an active and long collaboration with the Angular and Chrome DevTool team, it was pretty useful for the Angular community to perform integration with third-party dependencies (with the help of node_modules, zone.js, etc.); and thus, could achieve linked stack traces.

    Now, with Angular 15, you can see the improvement in the stack traces as mentioned below:

    Copy
    ERROR Error: Uncaught (in promise): Error
    Error
       at app.component.ts:18:11
       at fetch (async) 
       at (anonymous) (app.component.ts:4)
       at request (app.component.ts:4)
       at (anonymous) (app.component.ts:17)
       at submit (app.component.ts:15)
       at AppComponent_click_3_listener (app.component.html:4)

    The above code shows that error message information from where it got encountered,, so developers can directly go to that code part and fix it immediately.

  7. CDK Listbox

    CDK (Component Dev Kit) offers different behavior primitives that help you build UI components. The Angular v15 gets a new primitive called CDK Listbox, making it easy for the Angular developers to customize Listbox interactions drawn up by the WAI-ARIA Listbox pattern based on requirements.

    cdk-listbox -angular 15

    Here, the behavioral interactions come up with impressive features like keyboard interactions, bidi layout support, and focus management. Moreover, it does not matter what you use; every directive comes up with associated ARIA roles with respective host elements.

  8. ESBuild Support of Angular 15

    In the previous version of the Angular framework, you can efficiently support esbuild to effectively build a faster javascript bundler, enabling quick build done by simplifying the pipeline.

    The Angular 15 comes up with new experimental support for the ng build –watch support, Sass, SVG template, and file replacement.

    Now, let’s see the command for upgrading the angular.json builder is:

    “builder”: “@angular-devkit/build-angular:browser-esbuild”

How to Install Angular 15?

Angular is one such robust framework that comes up with multiple Angular development tools. Installing Angular 15 on your system is very easy, you just need NPM installed in your system.

Command to install Angular 15: npm install – global @angular/cli@latest

How Can You Upgrade to Angular 15?

If you’re already using Angular version 14 or lower, and you want to upgrade to Angular 15, you need to type the following command.

Command: ng update @angular/cli @angular/core

Please follow Angular Update Guide

Conclusion

What are you waiting for? Upgrade to Angular 15 and grab the Angular 15 new features to build a robust and secure web application for your business needs.

Angular 15 is now available, and you can install it without obstructions. Still, if you find any issue in installing or planning to develop front-end development services, consult Albiorix now.

Ankur Akvaliya is Sr. Software Engineer at Albiorix Technology. He is a dedicated and hard-working person to deals with any technological needs. He is prominent in working with object-oriented design, problem resolution, requirement gathering, and finally debugging the code. Above all, his keen interest is in writing the technical articles that can become a boon for readers.

Frequently Asked Questions

What is Angular?

Angular is a leading front-end JavaScript framework that helps you build robust web applications for your business needs.

Is Angular 15 stable?

Angular 15 is released with many features that are stable like standalone components API and Directive composition API. So we can say that Angular 15 is stable.

Ankur Akvaliya

Ankur Akvaliya is Sr. Software Engineer at Albiorix Technology. He is a dedicated and hard-working person to deals with any technological needs. He is prominent in working with object-oriented design, problem resolution, requirement gathering, and finally debugging the code. Above all, his keen interest is in writing the technical articles that can become a boon for readers.

Key Clients

Adobe -Albiorix Client
Sony Albiorix Client
SEGA Albiorix Client
Roche Albiorix Client
Hotel- Albiorix Client
AXA- Albioirx Client
Booking.Com- The Albiorix Client
Rental Cars -Albiorix Client
Covantex - Albiorix Client
MwareTV Albiorix client

Get in Touch


    Our Offices
    Head Office & Development Center
    Albiorix Head Office India India

    A-804, Safal Profitaire, Prahladnagar,
    Ahmedabad, Gujarat 380015.

    Sales Office
    Albiorix Development Center Australia Australia

    81-83 Campbell Street,
    Surry Hills, NSW 2010, Australia