Tag: Angular 15 features

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 and allowing 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.

Key Takeaways

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 new 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.

Contact Us

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 component 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.

   With the help of stable Standalone APIs, you can effectively create Multi-Route Application

   • By using the new router standalone APIS, it becomes easy for you to design and build a multi-route application for your business needs.
   • Moreover, bundlers in Angular 15 are solely responsible for reducing the bundle size by reducing the unused features of the router, especially at the build time.

   In case, if you want to import NgModule in your standalone component APIs 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 Standalone Directive Composition API and made our development experience smooth.

   Want to know how? Directive Composition API makes code usability enhancement 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 the option of Image directive 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 i image dimensions are unknown to web developers 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, 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 own 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. Stable MDC-Based Components

   MDC stands for Material Design Components, which are pre-built UI components that implement the Material Design specification. Angular provides a way to use MDC-based components in your application through the Angular Material library.

   Angular Material is a UI component library for Angular that is built with Material Design principles in mind. It provides a set of building UI components that can be easily integrated into your Angular application. Angular Material design components typically uses MDC web components under the hood, which means that the components are built using the same CSS and JavaScript as the MDC components.

   Some of the Angular Material components include buttons, cards, menus, dialogs, and many others. These components are fully customizable and can be styled to fit the look and feel of your application.

   To use Angular Material in your application, you need to install the @angular/material package and automatically import components and the required modules in your application module. Here’s an example:

   Copy

   import { NgModule } from '@angular/core';
   import { MatButtonModule } from '@angular/material/button';
   import { MatCardModule } from '@angular/material/card';
   
   @NgModule({
     imports: [
       MatButtonModule,
       MatCardModule
     ],
     exports: [
       MatButtonModule,
       MatCardModule
     ]
   })
   export class MaterialModule { }

8. CDK Listbox

   CDK (Component Dev Kit) offers different behavior user interface 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.

   

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

9. 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 server-side rendering 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”

10. Functional Router Guards

    The Angular development team worked hard on minimizing the boilerplate code by simply performing code refactoring. It is made possible by using the tree-shakable standalone router APIs in your business applications. Moreover, it helps you reduce the bundle size of Angular with the new Functional Router Guards; we can refactor the code.

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.

Please follow Angular Update Guide

Upgrading from Angular 14 to Angular 15

• If you want to use Angular 15, the foremost thing to perfect is updating Node.js versions to either of the 14.20.x, 16.13.x and 18.10.x.
• Apart from Node.js updates, you need to mandatorily update the TypeScript version to 4.8 or later before approaching upgrading to Angular version 15.
• Simply provide the command: ng update @angular/core@15 @angular/cli@15 in the application project directory to make your Angular 15 application update.
• You can simply run ng update @angular/material@15 to update the Angular Material components.
• For Angular version 15, the primary role of the Angular compiler is to prefix your @keyframes in CSS with the component’s scope. So, it becomes essential to update all such instances to specifically define Keyframes programmatically using Angular compiler. To do that, you just need to use global stylesheets, or simply update or make minor change in the component’s view encapsulation.
• Removing enableIvy from the tsconfig.json file is an essential factor, as it is the only rendering engine in Angular 15, so it is not required.
• Angular 15 developers can effectively use decorators in base classes with child classes. It will simply inherit constructors and use Dependency Injection for the Angular app. So, you need to decorate the base classes with either @Injectable or @Directive otherwise, else get ready to view the error from the compiler.
• In Angular latest version 15, you can effectively call the setDisabledState, especially when a ControlValueAccessor is attached. It is made possible using FormsModule.withConfig or ReactiveFormsModule.withConfig.
• You just need to ensure that all ActivatedRouteSnapshot objects have a title property in your Angular code. In v15 of Angular, ActivatedRouteSnapshot’s required property typically requires the title property.
• In version 15 of Angular, you cannot configure relativeLinkResolution in the Router. It is primarily used to opt-out of the previous bug fix in the Angular 15 application that is now standard.
• It’s mandatory for you to simple update instances of the DATE_PIPE_DEFAULT_TIMEZONE token to use DATE_PIPE_DEFAULT_OPTIONS for time zone configuration. The DATE_PIPE_DEFAULT_TIMEZONE token is deprecated In Angular version 15.
• Existing instances of <iframe> may have security-sensitive attributes applied to them as an attribute or property binding. These security-sensitive attributes can appear in a template or in the host bindings of a directive. You need to such occurrences with regular updates for ensuring compliance with the new and stricter rules for <iframe> binding of the Angular 15 app.
• Injector.get() instances that use an InjectFlags parameter should be updated to use an InjectOptions parameter. Injector.get(InjectFlags )’s parameter is deprecated in v15.
• You need to change the instances of TestBed.inject() to use an InjectOptions parameter in Angular application. In Angular 15, the InjectFlags parameter of TestBed.inject() is deprecated.
• In Angular 15 version, you will find deprecation in using providedIn: ngModule for an @Injectable and InjectionToken. And also in using providedIn: ‘any’ for an @Injectable or InjectionToken.
• Likewise, you can effectively use the RouterLink directive for updating instances of the RouterLinkWithHrefdirective. In Angular 15, you’ll find deprecation with RouterLinkWithHref directive.
• In Angular Material v15, the refactorization of many Angular web components has been performed on the official MDC. It eventually affects the DOM and CSS classes of many components available in the Angular app 15.
• Once you upgrade your web application to Angular 15, you can quickly review your business application and its interactions to cope with the smooth functioning of all the application features including lazy loading functionality.

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 16 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.