AF
ARDIANFAZRI

What's New in Angular 15? A Comprehensive Guide

Ardian Fazri
Ardian Fazri
Feb 21, 2026

I have been following the Angular framework since its first version. Back then, it was quite simple as it relied on standard JavaScript. Later, the team completely rebuilt Angular to be more modular using TypeScript and has been consistently updating it up to version 15.

So, what are the major changes and new features in Angular 15?

Standalone APIs are Now Stable

In version 14, Angular introduced Standalone APIs which allowed developers to build applications without NgModules. In version 15, these Standalone APIs have officially reached stable status and will continue to evolve.

Using this approach, you don't need to import NgModules to run an Angular app; you can directly call the components you need. Minko Gechev provided a code example like this:

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

Router & HttpClient Tree-Shakable APIs

You can now build multi-route applications using the new router standalone API. The declaration looks like this:

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

One of the biggest advantages of using the provideRouter API is that it is tree-shakable.

Understanding Tree Shaking

Tree Shaking is a term in the JavaScript ecosystem that refers to "dead code elimination." It uses import and export statements to detect which modules are actually being used.

Usually, module bundlers like Webpack or Rollup automatically remove unused code during the bundling process. This ensures that the final production file is as small as possible, leading to faster data transfer and better performance. In Angular 15, these new APIs can reduce the bundle size by up to 11%.

Directive Composition API

This feature was highly requested on GitHub and brings code reuse to a whole new level. It allows developers to enhance host elements with directives.

Take a look at the code below:

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

In this example, MatMenu is enhanced with two directives: HasColor and CdkMenu. It inherits all the logic from HasColor but only uses selected inputs/outputs from CdkMenu.

The Image Directive is Now Stable!

Optimizing images is crucial because they are often the "elephant in the room"—the largest assets on a webpage. Angular now has a stable Image Directive (NgOptimizedImage) that handles the heavy lifting for you.

New features in version 15 include:

  1. Automatic srcset Generation: Ensures the correct image size is delivered based on the user's device.
  2. Fill Mode [Experimental]: Allows an image to fill its parent container, perfect for background images or card layouts.
import { NgOptimizedImage } from '@angular/common';

@Component({
    standalone: true,
    imports: [NgOptimizedImage],
    template: `<img [ngSrc]="url" priority>`
})
class MyStandaloneComponent {}

Functional Router Guards

Angular 15 reduces the boilerplate required for router guards. Previously, you had to create a class-based guard. Now, you can use Functional Guards.

Old way (Class-based):

@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
    constructor(private loginService: LoginService ) {}
    canActivate() {
        return this.loginService.isLoggedIn();
    }
}

New way (Functional):

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

Better Stack Traces

Debugging is now much less stressful. Angular 15, in collaboration with Chrome DevTools, has improved error messages to show you exactly where the error occurred in your code, rather than showing a long list of internal library traces.

MDC-Based Components are Stable

Angular Material has been refactored to align with Material Design Components for Web (MDC). This allows for better alignment with the Material 3 (M3) design language used by Google.

If you still need the old designs, you can access them via "legacy" imports:

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

Other Notable Updates

  • CDK Listbox: A new primitive for building custom listbox interactions.
  • Esbuild Support: Experimental support for esbuild now includes Sass, SVG templates, and file replacement, significantly speeding up build times.
  • CLI Improvements: You can now generate standalone components directly using ng g component --standalone.
  • Automatic Imports: The Angular Language Service now automatically suggests imports for components used in templates but not yet imported in the file.

Conclusion

This article highlights key points from the official Angular blog. Version 15 is a solid step forward, making the framework more lightweight, faster, and developer-friendly.

Explore Topics