{"id":6316,"date":"2023-01-05T07:42:48","date_gmt":"2023-01-05T07:42:48","guid":{"rendered":"https:\/\/www.ntspl.co.in\/blog\/?p=6316"},"modified":"2023-01-31T07:55:06","modified_gmt":"2023-01-31T07:55:06","slug":"angular-15-new-features-and-updates","status":"publish","type":"post","link":"https:\/\/www.ntspl.co.in\/blog\/angular-15-new-features-and-updates\/","title":{"rendered":"Angular 15 New Features and Updates"},"content":{"rendered":"

Over the past year we removed Angular\u2019s legacy compiler and rendering pipeline which enabled the development of a series of developer experience improvements in the past couple of months. Angular v15 is the culmination of this with dozens of refinements which lead to better developer experience and performance.<\/strong>\"Surise<\/p>\n

Sunrise photo by Minko\u00a0Gechev<\/a><\/figcaption><\/figure>\n

Standalone APIs are now out of developer preview!<\/h3>\n

In v14 we introduced new standalone APIs which enable developers to build applications without using NgModules. We\u2019re happy to share that these APIs graduated from developer preview and are now part of the stable API surface. From here on we will evolve them gradually following semantic versioning.<\/p>\n

As part of making sure standalone APIs were ready to graduate we have ensured that standalone components work across Angular, and they now fully work in HttpClient, Angular Elements, router and\u00a0more.<\/p>\n

The standalone APIs allow you to bootstrap an application using a single component:<\/p>\n

import {bootstrapApplication} from '@angular\/platform-browser';\r\nimport {ImageGridComponent} from'.\/image-grid';\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'photo-gallery',\r\n  imports: [ImageGridComponent],\r\n  template: `\r\n    \u2026 <image-grid [images]=\"imageList\"><\/image-grid>\r\n  `,\r\n})\r\nexport class PhotoGalleryComponent {\r\n  \/\/ component logic\r\n}\r\n\r\nbootstrapApplication(PhotoGalleryComponent);<\/pre>\n
Router and HttpClient tree-shakable standalone APIs<\/h3>\n
You can build a multi-route application using the new router standalone APIs! To declare the root route you can use the following:<\/p>\n
export const appRoutes: Routes = [{\r\n  path: 'lazy',\r\n  loadChildren: () => import('.\/lazy\/lazy.routes')\r\n    .then(routes => routes.lazyRoutes)\r\n}];<\/pre>\n
Where lazyRoutes are declared\u00a0in:<\/p>\n
import {Routes} from '@angular\/router';\r\n\r\nimport {LazyComponent} from '.\/lazy.component';\r\n\r\nexport const lazyRoutes: Routes = [{path: '', component: LazyComponent}];<\/pre>\n
and finally, register the appRoutes in the bootstrapApplication call:<\/p>\n
bootstrapApplication(AppComponent, {\r\n  providers: [\r\n    provideRouter(appRoutes)\r\n  ]\r\n});<\/pre>\n
Another benefit of the provideRouter API is that it\u2019s tree-shakable! Bundlers can remove unused features of the router at build-time. In our testing with the new API, we found that removing these unused features from the bundle resulted in an 11% reduction in the size of the router code in the application bundle.<\/p>\n
Directive composition API<\/h3>\n
The directive composition API brings code reuse to another level! This feature was inspired by the most popular feature request<\/a> on GitHub asking for the functionality to add directives to a host\u00a0element.<\/p>\n
The directive composition API enables developers to enhance host elements with directives and equips Angular with a powerful code reuse strategy, that\u2019s only possible thanks to our compiler. The directive composition API only works with standalone directives.<\/p>\n
Let\u2019s look at a quick\u00a0example:<\/p>\n
@Component({\r\n  selector: 'mat-menu',\r\n  hostDirectives: [HasColor, {\r\n    directive: CdkMenu,\r\n    inputs: ['cdkMenuDisabled: disabled'],\r\n    outputs: ['cdkMenuClosed: closed']\r\n  }]\r\n})\r\nclass MatMenu {}<\/pre>\n
In the code snippet above we enhance MatMenu with two directives: HasColor and CdkMenu. MatMenu reuses all the inputs, outputs, and associated logic with HasColor and only the logic and the selected inputs from\u00a0CdkMenu.<\/p>\n
This technique may remind you of multiple inheritance or traits in some programming languages, with the difference that we have a mechanism for resolution of name conflicts and it\u2019s applicable to user interface primitives.<\/p>\n
Image directive is now\u00a0stable!<\/h3>\n
We announced developer preview of the Angular image directive<\/a> that we developed in collaboration with Chrome Aurora<\/a> in\u00a0v14.2.\"Image<\/p>\n
Before and after of a demo application<\/figcaption><\/figure>\n
We\u2019re excited to share that it is now stable! Land\u2019s End<\/a> experimented with this feature and observed 75% improvement in LCP in a lighthouse lab\u00a0test<\/a>.<\/p>\n
The v15 release also includes a few new features for the image directive:<\/p>\n