Angular v15 is now available! Find all the new features , changes and refinements.
The latest version of the popular JavaScript framework Angular brings some new features and improvements, including a MDC-based components and updates in angular material etc.
Angular 15 was released on November 16, 2022. Angular latest version contains dozens of refinements , improvements and preformance.
With these changes, Angular v15 is another step forward in making the framework more efficient and easier to use. Developers can get started with the latest angular version by updating their existing projects or creating new ones using the Angular CLI.
Developer preview for standalone API’s
In angular v14 , we introduced Standalone APIs that are now available for public use. After months in developer preview, we’re excited to share that the new standalone APIs are now available for all developers and are now part of the stable API surface.
The new standalone APIs provide a simpler, more efficient way to access data and services from Google. Developers can now access data and services from a single API instead of multiple APIs. This makes it easier to develop apps that work with Google data and services.
With the help of this standalone API , you will be able to bootstrap an angular application using only single component this way…
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);Tree-shakable standalone APIs for router
Angular 15 is here and with it, new features and updates! One of the most exciting additions is the new tree-shakable standalone APIs for router in latest version of angular.
What does this mean for developers? Well, with these new APIs, you can now create small, self-contained routers that can be easily used in any Angular application. And best of all, they’re completely reusable!
You can build an application that uses the router’s standalone APIs with the multi-route feature, which allows you to declare the root route!
To do this, use the following declaration:
export const appRoutes: Routes = [
{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.routes').then(routes =>
routes.lazyRoutes)
}
];And, the declaration of this lazyRoutes:
import {Routes} from '@angular/router';
import {LazyComponent} from './lazy.component';
export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];And resigter the routes with provideRouter in bootstrapApplication, providerRouter API is a tree-shakable API and it is a powerful way to manage your routing.
It provides a clean, declarative way to define your routes, and a simple api to access them. The provideRouter api is easy to use, and it makes managing your routes a breeze.
That’s how we include it in the providerRouter API.
bootstrapApplication(AppComponent,
{
providers: [ provideRouter(appRoutes) ]
});This is a huge step forward for Angular, and will make it much easier for developers to create powerful and efficient applications.
So if you’re looking to create a router in Angular 15, be sure to check out these new APIs!
MDC-based Release for components to stable
The new release on MDC-based (Material Design components for web) components to stable has been announced, the refactoring is done now. With this feature of angular allows it to align closer with material specification and resue code.
This is a great news for those who have been waiting for the new features and improvements that have been made to the angular material.
There are many changes for components that got updated with the style and the DOM structures and other new things in angular material
Here You can check the list of all components changes.
The previous implementation of all components are now deprecated. You can still access the legacy imports using the module having legacy word like this:
import {MatLegacyButtonModule} from @angular/material/legacy-button';instead of
import {MatButtonModule} from '@angular/material/button';New Improvements in components
Angular team has resolved the 4th most upvoted issue — the range selection support in the slider
Range slider is one of the new features in Angular Material. It allows for greater control over how users select a value from a given range.
Here’s how you can use this range input slider:
<mat-slider min="200" max="500">
<input value="300" matSliderStartThumb>
<input value="500" matSliderEndThumb>
</mat-slider>Angular material range slider:
Can Specify the default density
This is release resolves another popular Github issue, Now you can specify the default density over all of the components in the application by customizing the theme.
With the help of this feature you can access wide range of improments , You get refined ARIA semantics, you can setup up custom contrast ratios and the touch target sizes are increased in this release.
@use '@angular/material' as mat;
$theme: mat.define-light-theme((
color: (
primary: mat.define-palette(mat.$red-palette),
accent: mat.define-palette(mat.$blue-palette),
),
typography: mat.define-typography-config(),
density: -2,
));
@include mat.all-component-themes($theme);Router unwraps default imports
Here you can make router more simpler , reduce the boilerplate in the routing imports with the help of this cool feature of angular v15,
let me show you an example:
When we lazy load standalone component we used provide import the of a component like this:
{
path: 'lazy',
loadComponent: () => import('./lazy-file').then(m => m.LazyComponent)
}But now , You can do like this:
{ path: 'lazy', loadComponent: () => import('./lazy-file'), }Optimize Images with the Angular Image Directive composition API
Angular v15 Image Directive composition API enables developers to dynamically compose images within their Angular applications. The API provides a way to dynamically change the URL of an image, making it possible to load different images based on conditions within the application.
This can be useful for displaying images that are specific to a user or for loading different images based on the device being used.
The Image Directive composition API is easy to use and can be implemented in any Angular application.
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 {}NgOptimizedImage directive is an image directive that enables composition API. It allows you to dynamically change the source, size and other properties of an image without having to reload the page.
This can be used to improve the user experience by reducing the amount of time it takes to load a page.
CDK listbox
Angular v15 released `cdk-listbox`, that is a great way to provide a list of options to the user in Angular. It is easy to use and can be customized to fit the needs of any application.
The `cdk-listbox` has several features that make it an ideal choice for use in Angular applications. it is easy to use and can be customized to fit the needs of any application.
It supports multiple selection, meaning that the user can select more than one option from the list.
@angular/cdk/listbox module provides a way to customize the interation based on WAI ARIA listbox pattern, where you can make use of all of your expected behaviour and experience.
- bidi layout support
- keyboard interaction
- focusing the element
Functional router guards
Functional router guards are a new feature in Angular v15. In this release , the boilerplate code is reduces working with tree-shakable standalone router API.
This provides a more flexible way to control access to routes than the traditional angular router.You can use functional router guards to control access to routes based on any criteria you want.
Let’s understand functional router guards with an example:
Earlier
@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
constructor(private loginService: LoginService) {}
canActivate() {
return this.loginService.isLoggedIn();
}
}
const route = { path: 'somePath', canActivate: [MyGuardWithDependency] };But now:
const route = {
path: 'admin',
canActivate: [() => inject(LoginService).isLoggedIn()]
};Angular Cli improvements
Angular standalone component API is now stable and you can create your standalone component using this command:
ng g component — standalone
We updated the configuration by removing test.ts, polyfills.ts and enviroments. this time you can specify the polyfill file directly in the angular.json under polyfills section.
"polyfills": [ "zone.js" ]Conclusion
In conclusion, This latest version of Angular (Angular v15) includes a number of new features and refinements, including functional router guards. This new version of Angular provides a more efficient way to handle routing, making it easier for developers to manage large applications.
In addition, angular latest version includes a number of other improvements, such as a more efficient compiler and better error handling.
the new features and refinements in Angular v15 are definitely worth checking out. So go ahead and update your version of Angular today!
Related Articles
How to create Angular standalone components (no ngModule required) in angular.
Top 7 less known angular features that every developer should know.
Originally published at https://www.akashminds.com.
