DEV Community

Cover image for ⭐Angular 15 Features ⭐
Sandeep Balachandran
Sandeep Balachandran

Posted on

⭐Angular 15 Features ⭐

Hey there,

Version 15.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ Simplifying Angular with Stable Standalone APIs

✅ Router and HttpClient tree-shakable standalone APIs

✅ Directive composition API

✅ Image directive is now stable!

✅ Router unwraps default imports

✅ Better stack traces

✅ Automatic imports in language service

✅ Angular CLI enhancements

✅ Deprecation

How to update to version 15

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 15

ng update @angular/cli @angular/core
Enter fullscreen mode Exit fullscreen mode

In order to update your global angular,

npm i -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

What’s in this release?

✅ Simplifying Angular with Stable Standalone API 👌

  • Angular standalone components aim to streamline the authoring of Angular applications by reducing the need for NgModules.

  • Standalone alone APIs are no longer in developer preview and are now part of the stable API surface

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(PhotoAppComponent);
Enter fullscreen mode Exit fullscreen mode
  • 👉 In v14, standalone components are in developer preview.

  • 👉 They are not stable API yet and will be potentially changed. But available to exploration and development.

  • As per the official announcement an example of usage can be found over here. 👈

✅Router and HttpClient tree-shakable standalone APIs

  • 👉 It is possible to build a multi-route application using the new router standalone APIs
import {Routes} from '@angular/router';

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

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];
Enter fullscreen mode Exit fullscreen mode
export const appRoutes: Routes = [{
  path: 'lazy',
  loadChildren: () => import('./lazy/lazy.routes').then(routes => routes.lazyRoutes)
}];
Enter fullscreen mode Exit fullscreen mode
  • Register the appRoutes in the bootstrapApplication call
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});

Enter fullscreen mode Exit fullscreen mode
  • 👉 provideRouter API is tree-shakable
  • Bundlers can remove unused features of the router at build-time

✅ Directive composition API

  • 👉 The directive composition API enables developers to enhance host elements with directives and equips Angular with a powerful code reuse strategy
  • 👉 The directive composition API only works with standalone directives
  • This feature was inspired by the most popular feature request on GitHub asking for the functionality to add directives to a host element.
@Component({
  selector: 'mat-menu',
  hostDirectives: [HasColor, {
    directive: CdkMenu,
    inputs: ['cdkMenuDisabled: disabled'],
    outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu {}
Enter fullscreen mode Exit fullscreen mode

✅ Image directive is now stable!

  • The v15 release also includes a few new features for the image directive

    • 👉 Automatic srcset generation
      • The directive ensures that an appropriately sized image is requested by generating the srcset attribute for you.
      • This can reduce download times for your images.
    • 👉 Fill mode [experimental]
      • This mode causes the image to fill its parent container, removing the requirement to declare the image’s width and height.
      • It’s a handy tool if you don’t know the sizes of your images or if you’d like to migrate CSS background images to use the directive.
  • The standalone NgOptimizedImage directive can be used directly in the component or NgModule:

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 {}
Enter fullscreen mode Exit fullscreen mode
  • To use it within a component just replace the image’s src attribute with ngSrc and make sure you specify the priority attribute for your LCP images

✅ Router unwraps default imports

  • To make the router simpler and reduce boilerplate further, the router now auto-unwraps default exports when lazy loading

  • Before this change, to lazy load a standalone component

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file').then(m => m.LazyComponent),
}
Enter fullscreen mode Exit fullscreen mode
  • Now the router will look for a default export and if it finds it, use it automatically, which simplifies the route declaration to
{
  path: 'lazy',
  loadComponent: () => import('./lazy-file'),
}
Enter fullscreen mode Exit fullscreen mode

✅ Better stack traces

  • More understandable stack errors
  • 👉 Instead of showing errors from third party dependencies error messages are more focused on code that developer has authored.

✅Automatic imports in language service

  • The language service now can automatically import components that you’re using in a template but haven’t added to a standalone component or an NgModule.

✅ CLI improvements

  • Now you can generate a new standalone component via ng g component --standalone

✅ Deprecations

  • providedIn: 'any' - The NgModule injector that receives the resolution.
  • providedIn: NgModule
  • Team will stop publishing new releases of @angular/flex-layout

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

Top comments (1)

Collapse
 
tojacob profile image
Jacob Samuel G.

🙌🔥