Know about ANGULAR 15.1.0 update AND ITS FEATURES

Angular has emerged as a very popular component-based framework for developing robust, responsive, and scalable web applications. It has improved with time and many versions have been introduced for the same. Many changes took place in the last few years such as the removal of the legacy compiler and the rendering pipeline. Now Angular 15 has been introduced with many new exciting changes. The aim is to enhance the developer experience and application performance.

Here are some of the new features of Angular 15.

1. New standalone APIs as part of stable API surface

Angular has progressed a lot since version 13. In Angular 13, NgModule was important as it contained different component configurations. In Angular 14, the Angular developers could create standalone components without using NgModule. Also, there were new standalone APIs as part of the developer’s preview. In Angular 15, these APIs have become a part of the stable API surface. The angular developers can develop and use the standalone components all across Angular and its components including router and Angular components.

2. New router standalone API

New router standalone APIs have been introduced in Angular 15. The Angular development services and developers can use them to create multi-route applications. The provideRouter API is tree-shakable. At the build time, unused features of the router can be removed to reduce the size of the router code in the application bundle.

3. Directive composition API

The angular developers can use this directive composition API to implement a powerful code reuse strategy in Angular. They can use directives to enhance host elements. The point to note is that this directive composition API can only be used with standalone directives. This feature takes code reuse to a different level. An example of the same is given below:

@Component({
  selector: 'mat-menu',
hostDirectives: [HasColor, {
  directive: CdkMenu,
  inputs: ['cdkMenuDisabled: disabled'],
outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu
{
}

Source Url: Angular v15 is now available!. Over the past year we removed Angular’s… | by Minko Gechev | Angular Blog

Here were are using the two directives HasColor and CdkMenu to enhance Matmenu.

4. Stable Image directive

The developer preview of the image directive was introduced in Angular v14.2. The Angular Image directive ‘ngOptimizedImage’ was released in this version. This directive has been made stable in Angular v15.1.0. The Angular developers can be happy to note that new features have been added to this directive. The ‘srcset’ attribute can be automatically generated for requesting the appropriate size request. Then there is fill mode which is in an experimental phase. It has been introduced as a handy tool in cases where the developer is unaware of the image size. The developers can use the fill mode to fill the parent container of the image to declare its dimensions.

5. New functional router guards

Here iss a simple code for defining guard that verifies user login

@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
  constructor(private loginService: LoginService) {}
canActivate() {
return this.loginService.isLoggedIn();
  }
}
const route = {
  path: 'somePath',
canActivate: [MyGuardWithDependency]
};

This code for defining a simple guard contains boilerplate codes which can be significantly reduced by the new functional router guards. The code would look like

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

Source Url: Angular v15 is now available!. Over the past year we removed Angular’s… | by Minko Gechev | Angular Blog

Now, the Angular developers can declare the guard within the guard declaration, keeping the code short and crisp.

6. Stable MDC-based components

Several components have been re-factored according to ‘Material Design Components for Web’ for several benefits including better accessibility, improved adherence to material design specs, and swift adoption of Material Design Specs in future versions. The Angular developers can now align their codes in close sync with the Material Design specifications. Organizations working on Angular Applications can Hire an Angular developers to adopt these changes. In Angular 15, there is a new CSS and DOM which calls for changes in some of the styles in your application. A company can easily upgrade your application with these changes.

Conclusion

This is a precise list of new features in Angular 15. This version again has many improvements and deprecations. The angular team has been rolling out several changes since 2020 such as optional NgModules. These changes are meant to help the developers in coding better. The current releases have been made interesting with standalone APIs. In the future, the developers can witness some more interesting features in different components such as server-side rendering pipelines and many more related changes. It would be best to hire an angular Js development company to understand and implement the required changes in your applications. These companies can also help you stay updated with the current and upcoming changes.

About Author

Ruchir Pandya

Delivery Head of Web

Ruchir Pandya is a seasoned software and business professional with over 15 years of experience in IT, Software Development, and operations. As the overseer of the Open-Source Web department (PHP Department), he takes charge of development and operations.

previous post next post