Introducing Angular 15 – New Features And Core Updates

Angular is a Google-based product and is available under the MIT license. The advanced framework offers various features vital for developing future-proof solutions. Google releases updates with various security patches and performance enhancements for the Angular framework. 

Angular 15 is Live, and various businesses have already installed the latest version of the TypeScript framework. If your website is based on Angular, or you want to build a new application from this advanced framework, this blog is for you. 

This article explores the Angular 15 Core Update’s New Features

1. Get your Hands On Standalone Components API

Angular 15 new features come with a standalone components API that lets you create applications without defining the NgModules. This improves the overall performance of the applications.

The standalone API component works perfectly with HttpClient, Angular Elements, and many more. TypeScript programmers can use this feature to bootstrap applications running on solo angular material components.

Following is an example of leveraging standalone components API:

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);

Angular 15 new features allow import functions to reference the standalone directives & pipes. You can also view and mark components, directives, and pipes as “standalone: true.” You do not have to declare the components into NgModule. Moreover, Angular developers can import NgModule into the standalone component using the code: [module_name] directly.

2. Advanced Use of Standalone API

With the Angular15 release, you get a standalone router API that helps build multi-route applications. The example below shows how:

export const appRoutes: Routes = [{ path: 'lazy',

loadChildren: () => import('./lazy/lazy.routes')

.then(routes => routes.lazyRoutes)

}];

Further, anyone can declare the lazyRoutes as follows:

import {Routes} from '@angular/router';

import {LazyComponent} from './lazy.component';

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

You can also register the app/Routes using the bootstrapApplication method. If required, you can call it via the ProvideRouter API. This API router is tree-shakable.

bootstrapApplication (AppComponent, {

    providers: [

         provideRouter(appRoutes)

    ]

 });

Note: The Angular 15 core update lets you disable or eliminate the unusable features and trim the code for a lightweight application. 

3. Code Reusability with Directive Composition API

If you want to develop new features into existing applications or code fresh applications, Angular 15 is a reliable framework. The latest version introduces the Directive Composition API, which ensures code reusability.

You can simply boost host elements with directives and use the code reuse strategy via the compiler. Below is an illustrative example.

 @Component({

    selector: 'mat-menu',

    hostDirectives: [HasColor, {

    directive: CdkMenu,

    inputs: ['cdkMenuDisabled: disabled'],

    outputs: ['cdkMenuClosed: closed']

    }]

    })

    class MatMenu {}

You can use the two hostDirectives, i.e., HasColor and CdkMenu, for accessing MatMenu. You can access all the features of MatMenu using these two directives.

Read blog : How to Migrate from AngularJs to Angular

4. Leverage Stable “NgOptimizedImage” Image Directive

The faster the speed performance, the greater the web application user experience. More than 50% of users nowadays expect the application and site to load within 3 seconds. One of the new Angular 15 features is the image-loading tool NgOptimizedImage which can reduce the loading time of the images by 75%. The image loading tool also provides the following two:

• Automatic srcset Generation: It helps you upload an appropriate image size under the user’s request, automatically reducing the image loading time. 

• Fill Mode [experimental]: It can declare the image dimensions and also instill the image in the original container.

Additionally, you can leverage the NgOptimizedImage directive in the Angular component or NgModule.

    import { NgOptimized Image } from '@angular/common';

// Include it into the necessary NgModule

@NgModule({

imports: [NgOptimizedImage],

})

class AppModule {}

// ... or a standalone Component

@Component({

standalone: true

imports: [NgOptimizedImage],

})

// ... or a standalone Component imports: [NgOptimizedImage],

class MyStandaloneComponent {}

5. Reduced Boilerplate in Guards

Let us discuss this new feature using an example. For greater clarity, let us use the guard to determine whether the user has logged in.

@Injectable({ providedIn: 'root' })

export class MyGuardWithDependency implements CanActivate {

    constructor(private loginService: LoginService) {}

canActivate() {

return this.loginService.isLoggedIn();

}

}

const route = {

path: 'somePath',

canActivate: [MyGuardWithDependency]

};

Originally the code was meant to be as given above. So, the LoginService contains vital logic. However, the guard takes care of only one target being invoked, which is LoggedIn (); the overuse of the boilerplate coding can now be eliminated. 

The latest Functional Router Guards allow you to replace the code as follows:

const route = {

    path: 'admin',

    canActivate: [()  => inject(LoginService).isLoggedIn()]

};

6. Stable MDC – Based Components

The Angular 15 core update has refactored the component based on the Angular Material Design Components for the web applications. The up-to-date components are coherent with the Angular Material Design Specifications and offer greater accessibility. 

This refactoring section can be viewed in the DOM and CSS parts. This provides excellent responsiveness to the existing Angular applications and is quite prominent in the scenario where CSS overrides the internal elements of the migrated components. 

The angular15 new features have various deprecated components which are recoverable via the “legacy” import. Here’s an example.

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

7. Component Dev Kit Listbox

You also get a Dev Kit Listbox component that helps create the UI components. This new feature facilitates the customization of the Listbox interactions developed by the WAI-ARIA Listbox pattern as per the latest needs.

This provides you with hands-on behavioral interactions for the following:

• Keyboard Interactions
• Bidi Layout Support
• Focus Management

Each directive has an associated ARIA role with the concerned host elements.

8. Experience Extended build Support

The latest angular version comes with experimental support for the ng build, which includes the following:

• Watch Support
• Sass
• SVG Template
• File Replacement.

You can use the following command to use the latest upgrade on the angular.json builder:

"builder": "@angular-devkit/build-angular: browser-esbuild"

9. List of Minor Enhancements with Angular v15

The Angular 15 new features come with several minor improvements. The notable ones are the following:

• Enhancements in the Lazy Loading

The new version allows automated unwrapping of the default exports for improved lazy loading of the images. You get reduced boilerplates with simplified router functionalities. 

• Released Automatic Imports

The latest Angular release automatically imports the components and their fixes in the template. You can use them for the components that are otherwise not used in the standalone component or a NgModule.

• Enhanced Angular Components

The Angular v15 comes with several accessibility enhancements, including the following:

• Contrast ratios
• Expanded touch target sizes
• Improved ARIA semantics
• Customized API for high UX

Wrapping Up

The Angular 15 new release has various exciting features that will revolutionize web performance. If your website or application is based on an older version of the framework, upgrading for high-performance and security features is vital. 

Angular development company can upgrade your existing application for maximum performance with database and code optimization. At JS Panther, we take backups that allow us to return to the original environment quickly. This helps to avoid issues with the version upgrade.