Angular 15 is the best version yet. There are many improvements which lead to a better developer experience and performance.
The Angular 15 version has been released and has been very successful so far. The framework was developed by Google but written in TS and released on the 16th of November, 2022.
Features of Angular 15
Stable Standalone APIs
The AngularJS (Angular) team has introduced some significant changes to the framework in version 15 and those changes are now stable. As such, we are moving the standalone application feature from developer preview mode.
Now Angular 15 has come with a new capability that lets developers build Angular applications without any modules.
Angular is a popular front-end library for those looking to simplify their development practices and make the process easier for themselves.
By using standalone APIs, you can bootstrap an Angular application easily in a single component.
Now let’s take a look at an example of standalone API usage.
@Component({
selector: ‘app-root’,
standalone: true,
template:`
<image-grid [imageList]=“list”></image-grid>`,
imports: [ImageGridComponent],
styleUrls: [‘./app.component.scss’],
})
export class AppComponent {
}
bootstrapApplication(AppComponent)
Http with provideHttpClient :
The most significant improvement included in Angular 15 is that you can use provideHttpClient to offer HttpClient without using HttpClientModule.
Angular 15 is a new, module-optional version of Angular, focused on HTTP support and modernization. With the help of provideHttpClient(), it’s possible to offer the HttpClient. HTTP interceptors are evolving and can now be defined as functors which brings them more in line with RxJS observables.
boostrapApplication(AppComponent, {
providers: [
provideHttpClient(),
]
})
Directive Composition API :
A new feature of Angular 15 is the directive composition API
The directive composition API in Angular allows developers to add directives to host elements, which gives the framework an opportunity for code reuse. However, it only works with standalone directives.
This feature was inspired by the well-known feature request on GitHub, asking to apply directives to a host element.
@Component({
selector: ‘mat-menu’,
hostDirectives: [HasColor, {
directive: CdkMenu,
inputs: [‘cdkMenuDisabled: disabled’],
outputs: [‘cdkMenuClosed: closed’]
}]
})
class MainMenu{}
Improved Stack Traces for Debugging :
You can now see much more relevant information when it comes to errors thanks to stack traces. This is according to a survey of developers who shared their struggles with debugging experience. That’s the reason the core Angular team spent time understanding these insights and ended up improving Angular stack traces.
As a result, Angular 15 now has clearer stack errors. Instead of showing errors with third-party dependencies, the version now displays the error message with code only.
Chrome DecTools support the Angular team to fix this issue.
Let’s take a look at a Stack trace:
After partnering with Chrome DevTools, they created a mechanism to eliminate scripts coming from node_modules with the notation source maps via the Angular CLI.
And that leads to better improvements in the stack trace in Chrome DevTools:
Stable Image Directives :
The image directive is stable in Angular 15 and increased the Largest Contentful Paint metric (LCP) score by almost 75% in the lighthouse Tool.
The angular 15 features for the image directive are there to help you out more than ever.
Automatic Generation of srcset:
In this version of Angular, srcset property directive is automatically created for you and the directive ensures that the right-sized image is requested. As a result, image downloaded time can be reduced.
Fill mode [experimental]:
By making the image fill its parent container, this option eliminates the need to declare the image’s width and height. If you don’t know the sizes of your photos or want to go over to using CSS background images with the directive, this is a useful tool.
Your component or NgModule can use NgOptimizedImage directly.
@NgModule({
imports: [NgOptimizedImage],
})
class AppModule {}
@Component({
standalone: true,
imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}
Simply add the ngSrc attribute to the image’s src attribute to use it within a component, and be sure to give your LCP images the priority attribute.
Router Unwraps Default Imports:
Using the router is simpler than ever now that it automatically unwraps default exports when lazy loaded. This reduces boiler plate code and ensures everything gets to where it needs to go.
In the prior version, to lazy load a standalone component, you had to:
{
path: ‘Lazy’,
loadComponent: () =>import(‘./lazy-file’).then(m => m.LazyComponent)
}
The router now automatically uses default exports if it finds them, simplifying the route declaration to one line.
{
path: ‘Lazy’,
loadComponent: () => import(‘./lazy-file’)
}
Automatic Imports in Language Service :
Now, make sure all the components that you use but haven’t added to a standalone component or NgModule can be automatically imported by the language service.
Dependency Injection:
Decorators for @Injectable() are no longer supported with the providedIn: NgModule syntax. You can use providedIn:”root” instead.
If you want providers to be limited to a single module, use NgModule.providers.
Forms
Custom validators let you include AbstractControl in their signatures meaning they are able to be reused in other forms. This is very useful if you have a form control with a custom validator because you can set it up once and then reuse it on the same form or any other where the control appears.
falseValues(control: AbstractControl) {
if(!isFormArray(control)) {
return null;
}
// check that every value is false
// we can use `control.controls` here
if(control.controls.some(c => c.value < 0)) {
return { falseValues: true}
}
return null;
}
CDK Listbox :
For the creation of UI components, the Component Dev Kit (CDK) provides a collection of easy-to-use behaviour primitives. One, in particular, is the CDK listbox that became available in version 15. This new primitive can easily be modified to suit your needs.
In order to create unique listbox interactions for the WAI-ARIA listbox pattern, directives are provided by the angular/CDK/listbox module.
When using the angular/CDK/list box, you’ll get all the expected behaviours for an accessible experience. This includes support for keyboard interaction, bidi layout, and attention management. It also ensures that every directive follows ARIA semantics.
Better Experimental ESbuild Support:
Angular 15 offers experimental Sass, SVG template, file replacement preferences, and the ability to watch for code changes with ng build –watch; you just need to update your angular.json with esbuild from:
“builder”: “@angular-devkit/build-angular:browser”
to:
“builder”: “@angular-devkit/build-angular:browser-esbuild”
Deprecations:
There are a couple of ways to scope providers to specific modules. Option one, provideIn: ‘any’ is now deprecated, but if you want to keep the provider scoped with a specific module, then use the NgModule.providers option.
In order to keep up with the latest CSS layouts, the team behind @angular/flex-layout is going to stop publishing new releases.
