⭐Angular 15 Features ⭐

#javascript #angular #beginners #webdev

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

In order to update your global angular,

npm i -g @angular/cli

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

👉 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}];

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

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});

👉 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 {}

✅ 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 {}

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),
}

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'),
}

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