{"id":2882,"date":"2022-12-09T10:32:13","date_gmt":"2022-12-09T10:32:13","guid":{"rendered":"https:\/\/www.nethues.com\/blog\/?p=2882"},"modified":"2023-09-19T09:42:40","modified_gmt":"2023-09-19T09:42:40","slug":"angular-15-is-live-now","status":"publish","type":"post","link":"https:\/\/www.nethues.com\/blog\/angular-15-is-live-now\/","title":{"rendered":"Angular 15 is Live Now: Explore New Features, Code Practices, & Concerned Deprecations"},"content":{"rendered":"

Angular, the fifth most popular web framework with 20.39% popularity as per Statista, has come up with a new & exciting version 15. The angular v15 is live and has been rolled out for the masses.\u00a0<\/span><\/p>\n

It is a significant shift for tech enthusiasts, primarily JavaScript & TypeScript programmers and developers. The new release will make remarkable contributions to the digital development world, as there are tons of Angular-based applications in active use.<\/span><\/p>\n

<\/span>So without any hither and thither, let’s dive into the details of what’s new with Angular 15<\/b><\/span><\/h2>\n

<\/span>#1. Experience Standalone Components API<\/b><\/span><\/h3>\n

The concept of the standalone components API was initially made available in Angular 14. Its objective is to create Angular applications<\/a> without wasting time defining the NgModules. With Angular 15, the standalone components API is now finally successful, as it has higher performance than its predecessor.<\/span><\/p>\n

Notably, the standalone component is compatible with HttpClient, Angular Elements, and many others. Coders can also leverage the feature for bootstrapping an application in a solo component.<\/span><\/p>\n

The following example illustrates how to leverage the standalone components API:<\/strong><\/p>\n

import {bootstrapApplication} from '@angular\/platform-browser';\r\nimport {ImageGridComponent} from'.\/image-grid';\r\n@Component({\r\nstandalone: true,\r\nselector: 'photo-gallery',\r\n imports: [ImageGridComponent],\r\ntemplate: `\r\n\u2026 <image-grid [images]=\"imageList\"><\/image-grid>\r\n `,\r\n}) \r\nexport class PhotoGalleryComponent {\r\n\/\/ component logic\r\n}\r\nbootstrapApplication(PhotoGalleryComponent);<\/code><\/pre>\n
The imports function now lets Angular developers<\/a> leverage reference standalone directives & pipes.<\/span><\/p>\n
The Angular v15 also lets a developer preview and mark components, directives, and pipes as “standalone: true”. Thus, it successfully eliminates the need to declare components into NgModule. Moreover, developers can directly import NgModule into the standalone component using the code: [module_name].<\/span><\/p>\n
<\/span>#2. Improved and more efficient use of standalone api<\/b><\/span><\/h3>\n
The new release has a router standalone API. It lets developers build the multi-route application. The following example shows how:<\/span><\/p>\n
export const appRoutes: Routes = [{\r\npath: 'lazy',\r\nloadChildren: () => import('.\/lazy\/lazy.routes')\r\n.then(routes => routes.lazyRoutes)\r\n}];\r\n<\/code><\/pre>\n
You can declare the lazyRoutes in the following manner:<\/strong><\/p>\n
\r\nimport {Routes} from '@angular\/router';\r\n\r\nimport {LazyComponent} from '.\/lazy.component';\r\n\r\nexport const lazyRoutes: Routes = [{path: '', component: LazyComponent}];\r\n<\/code><\/pre>\n
The new release also lets you register the appRoutes via the bootstrapApplication method. One can also call it via the ProvideRouter API, which is tree-shakable!<\/span><\/p>\n
bootstrapApplication(AppComponent, {\r\nproviders: [\r\nprovideRouter(appRoutes)\r\n]\r\n});\r\n<\/code><\/pre>\n
An essential aspect of Angular 15 is that the developers can eliminate unused features and reduce the code size by up to 11%.\u00a0\u00a0<\/span><\/p>\n
<\/span>#3. Directive Composition API<\/b><\/span><\/h3>\n
Code reusability is a significant factor when looking for faster development cycles and a faster time-to-market application. The Angular 15 offers top-notch reusability of directives. It comes with the introduction of Directive Composition API, which plays a pivotal role in code reusability.<\/span><\/p>\n
For example, the developers can boost host elements with directives and leverage code reuse strategy with the assistance of a compiler. Along with the standalone directives, programmers can leverage the Directive Composition API<\/span><\/p>\n
@Component({\r\nselector: 'mat-menu',\r\nhostDirectives: [HasColor, {\r\ndirective: CdkMenu,\r\ninputs: ['cdkMenuDisabled: disabled'],\r\noutputs: ['cdkMenuClosed: closed']\r\n}]\r\n})\r\nclass MatMenu {}\r\n<\/code><\/pre>\n
The MatMenu is now available and effective via two hostDirectives, i.e., HasColor and CdkMenu. Moreover, with this feature, MatMenu lets users have hands on all the properties from these two directives.\u00a0<\/span><\/p>\n
\n
You May Find This Interesting :\u00a0In-Depth Guide To Angular Performance Tuning<\/a><\/p>\n
\n
<\/span>#4. Get Your Hands on Stable “NgOptimizedImage” Image Directive<\/strong><\/span><\/h3>\n
Image loading time plays a vital role in the speed performance of any web application. The Angular framework was introduced with the NgOptimizedImage directive in the older versions to offer minimum image loading time. However, it was far from perfection. With Angular15, the directive is much more stable and is finally a reliable image-loading tool.\u00a0<\/span><\/p>\n
Have a look at the experiment done by Land’s End. Using the NgOptimizedImage directive an application has noticed an improvement as impressive as a 75% decrement in the LCP (Largest Contentful Paint) image loading time.<\/span><\/p>\n
\"LCP\"<\/p>\n
Along with the previously offered features, it also comes with the following:<\/b><\/p>\n