Table of Contents

    Angular has emerged as a very popular component-based framework for developing robust, responsive, and scalable web applications. It has improved with time and many versions have been introduced for the same. Many changes took place in the last few years such as the removal of the legacy compiler and the rendering pipeline. Now Angular 15 has been introduced with many new exciting changes. The aim is to enhance the developer experience and application performance.

    Here are some of the new features of Angular 15.

    1. New standalone APIs as part of stable API surface

    Angular has progressed a lot since version 13. In Angular 13, NgModule was important as it contained different component configurations. In Angular 14, the Angular developers could create standalone components without using NgModule. Also, there were new standalone APIs as part of the developer’s preview. In Angular 15, these APIs have become a part of the stable API surface. The angular developers can develop and use the standalone components all across Angular and its components including router and Angular components. 

    2. New router standalone API

    New router standalone APIs have been introduced in Angular 15. The Angular development services and developers can use them to create multi-route applications. The provideRouter API is tree-shakable. At the build time, unused features of the router can be removed to reduce the size of the router code in the application bundle. 

    3. Directive composition API

    The angular developers can use this directive composition API to implement a powerful code reuse strategy in Angular. They can use directives to enhance host elements. The point to note is that this directive composition API can only be used with standalone directives. This feature takes code reuse to a different level. An example of the same is given below:

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

    Source Url: Angular v15 is now available!. Over the past year we removed Angular’s… | by Minko Gechev | Angular Blog

    Here were are using the two directives HasColor and CdkMenu to enhance Matmenu. 

    4. Stable Image directive

    The developer preview of the image directive was introduced in Angular v14.2. The Angular Image directive ‘ngOptimizedImage’ was released in this version. This directive has been made stable in Angular v15.1.0. The Angular developers can be happy to note that new features have been added to this directive. The ‘srcset’ attribute can be automatically generated for requesting the appropriate size request. Then there is fill mode which is in an experimental phase. It has been introduced as a handy tool in cases where the developer is unaware of the image size. The developers can use the fill mode to fill the parent container of the image to declare its dimensions.

    5. New functional router guards

    Here iss a simple code for defining guard that verifies user login

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

    This code for defining a simple guard contains boilerplate codes which can be significantly reduced by the new functional router guards. The code would look like

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

    Source Url: Angular v15 is now available!. Over the past year we removed Angular’s… | by Minko Gechev | Angular Blog

    Now, the Angular developers can declare the guard within the guard declaration, keeping the code short and crisp. 

    6. Stable MDC-based components

    Several components have been re-factored according to ‘Material Design Components for Web’ for several benefits including better accessibility, improved adherence to material design specs, and swift adoption of Material Design Specs in future versions. The Angular developers can now align their codes in close sync with the Material Design specifications. Organizations working on Angular Applications can Hire an Angular developers to adopt these changes. In Angular 15, there is a new CSS and DOM which calls for changes in some of the styles in your application. A company can easily upgrade your application with these changes.

    Conclusion

    This is a precise list of new features in Angular 15. This version again has many improvements and deprecations. The angular team has been rolling out several changes since 2020 such as optional NgModules. These changes are meant to help the developers in coding better. The current releases have been made interesting with standalone APIs. In the future, the developers can witness some more interesting features in different components such as server-side rendering pipelines and many more related changes. It would be best to hire an angular Js development company to understand and implement the required changes in your applications. These companies can also help you stay updated with the current and upcoming changes. 

    About Author

    Manektech Team

    ManekTech Team

    ManekTech is a well-known software development and IT consulting company, providing custom software, website, and mobile app development services. ManekTech has own content writing and development team who writes content on various and trending technology that it serves currently.

    Subscribe to Our Newsletter!

    Join us to stay updated with our latest blog updates, marketing tips, service tips, trends, news and announcements!

    OUR OFFICES


    ManekTech's Global Presence

    USA

    4100 NW Loop 410, Suite 200, San Antonio, Texas, USA 78229

    UK

    7 Artisan Place Harrow, HA3 5DS

    India

    4th Floor, Timber Point, Prahaladnagar Road, Ahmedabad, Gujarat - 380015

    Germany

    Franz-Joseph-Strasse, 11,Munich, 80801, Germany

    South Africa

    The Business Centre No 1. Bridgeway Road, Bridgeway Precint, Century City, Cape Town, South Africa, 7446

    PREV
    NEXT