⭐Angular 15 Features ⭐
Tags: javascript, angular, beginners, webdev
Published: 2022-11-18 13:55:34

---
title: ⭐Angular 15 Features ⭐
published: true
description: Angular 15 features
tags: javascript, angular, beginners, webdev
series: Angular Journey
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbfqa72tnwe6im7bh8bp.png
---

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 






<h1> How to update to version 15</h1>
Visit <a href="https://update.angular.io">update.angular.io</a> for detailed information and guidance. To have the best update experience,

Update to 15
```cmd
ng update @angular/cli @angular/core
```

In order to update your global angular,
``` cmd
npm i -g @angular/cli
```

<center><h2><u>What’s in this release?</u></h2></center>


## ✅ Simplifying Angular with Stable Standalone API 👌
* [Angular standalone components](https://angular.io/guide/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](https://gist.githubusercontent.com/twerske/6fa8f71a37cf28a24c439e01325784a4/raw/ce2097de9bbf19c7d7125b88f708cf40f9352f34/main.ts). 👈
  

## ✅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)
}];
```

* Register the appRoutes in the bootstrapApplication call

```
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](https://github.com/angular/angular/issues/8785) 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.
  
## ✅ 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 : <a href="https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8">Official Announcement 😄</a>

Changelog : <a href="https://github.com/angular/angular/blob/master/CHANGELOG.md"> Repository </a>