Scribd
Upload
20 views4 pages

Angular 15 Features

Uploaded by

Aditi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views4 pages

Angular 15 Features

Uploaded by

Aditi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

1.Standalone APIs are now out of developer preview!

now part of the stable API surface. From here on


we will evolve them gradually following semantic versioning.
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(PhotoGalleryComponent);
2.Router and HttpClient tree-shakable standalone APIs
You can build a multi-route application using the new router standalone APIs! To
declare the root route you can use the following:

export const appRoutes: Routes = [{


path: 'lazy',
loadChildren: () => import('./lazy/lazy.routes')
.then(routes => routes.lazyRoutes)
}];
Where lazyRoutes are declared in:

import {Routes} from '@angular/router';

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

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

and finally, register the appRoutes in the bootstrapApplication call:

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

3.Directive composition API


The directive composition API brings code reuse to another level! This feature was
inspired by the most popular feature request on GitHub asking for the functionality
to add directives to a host element.

he directive composition API enables developers to enhance host elements with


directives and equips Angular with a powerful code reuse strategy, that’s only
possible thanks to our compiler. The directive composition API only works with
standalone directives.
Ex:
@Component({
selector: 'mat-menu',
hostDirectives: [HasColor, {
directive: CdkMenu,
inputs: ['cdkMenuDisabled: disabled'],
outputs: ['cdkMenuClosed: closed']
}]
})
class MatMenu {}

4.Image directive is now stable!


Stable “NgOptimizedImage” Image Directive
The NgOptimizedImage directive was introduced in the previous version to easily
adopt best practices for loading image performance.

We announced developer preview of the Angular image directive that we developed in


collaboration with Chrome Aurora in v14.2.

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.

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

5.Functional router guards


Together with the tree-shakable standalone router APIs we worked on reducing
boilerplate in guards. Let’s look at an example where we define a guard which
verifies if the user is logged in:

@Injectable({ providedIn: 'root' })


export class MyGuardWithDependency implements CanActivate {
constructor(private loginService: LoginService) {}

canActivate() {
return this.loginService.isLoggedIn();
}
}

const route = {
path: 'somePath',
canActivate: [MyGuardWithDependency]
};
With the new functional router guards, you can refactor this code down to:

const route = {
path: 'admin',
canActivate: [() => inject(LoginService).isLoggedIn()]
};

6.Router unwraps default imports


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

Let’s suppose you have the following LazyComponent:

@Component({
standalone: true,
template: '...'
})
export default class LazyComponent { ... }
Before this change, to lazy load a standalone component you had to:

{
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'),
}
7.Release MDC-based components to stable
We’re happy to announce the refactoring of the Angular material components based on
Material Design Components for Web (MDC) is now done! This change allows Angular to
align even closer to the Material Design specification, reuse code from primitives
developed by the Material Design team, and enable us to adopt Material 3 once we
finalize the style tokens.
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
8.CDK Listbox
The Component Dev Kit (CDK) offers a set of behavior primitives for building UI
components. In v15 we introduced another primitive that you can customize for your
use case — the CDK listbox:
9.Improvements in the experimental esbuild support
Cleaner, Better Stack Traces

ng build --watch support, Sass, SVG template, and file replacement. The command for
upgrading the angular.json builder is:

"builder": "@angular-devkit/build-angular:browser-esbuild"

10.CLI improvements
In the Angular CLI we introduced support for standalone
stable APIs.
Now you can generate a new standalone component via
ng g component --standalone.

You can now specify your polyfills directly in angular.json in the polyfills
section:
"polyfills": [
"zone.js"
]
11.Router Now Auto-Unwarps Default Exports For Lazy Loading: It simplifies the
router functions by adding more enablement to reduce even more boilerplates. Here,
for lazy loading, the router will look for the default export, and if it gets
successful, it directly imports its lazy-file into the code.
Automatic Imports In-Language Support Service –
Quick Fix: Now, write your Angular code more confidently by making the most out of
the language service. You can use this feature to automatically import components
and their fixes in the template, which components are not used in a standalone
component or in a NgModule.
Improved Angular Components: The Angular components’ v15 covers a range of
accessibility enhancements, including effective contrast ratios, expanded touch
target sizes, and refined ARIA semantics. Furthermore, Angular components can have
their APIs to customize their density for a better theme customization experience.

You might also like