Angular 16 – Top 8 new must known features for Developers

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-message',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.message.component.html',
})
export class AppMessageComponent {
    @Input({required:true}) message = '';
}

In the past, with the release of Angular 9, the Angular team implemented the new view engine called Ivy related to the compilation related to the next-generation rendering pipeline. At that time, ngcc has been introduced to support the libraries which are based on the old view engine. In the latest Angular 16 version, the ngcc and all related code blocks related to the old view-engine have been removed to reduce the application bundle size. So, the old engine can not be used in Angular 16 onwards. So, now, we can say that the Angular framework completely transferred to Ivy.

05. Server Side Rendering and Hydration

In the case of a SPA (Single Page Application) based application, one of the key factors is always improved runtime performance. But, at the time of initial page load, normally it takes fewer seconds extra compared to the classic web-based application. And it is because, at the time of initial page load, it always loads a large volume of JavaScript Code along with HTML and CSS. But, for some type of applications like Web Portal or shipping-based applications, this extra time at the initial loading always cause a problem for the companies. For such cases, one simple solution is to use the server-side rendering technique so that the server always can deliver the finished HTML page and it will load on the browser very quickly.

Angular provides this support from the beginning. But the behavior of it is not so good. Because, when the JavaScript-based code is loaded then it re-renders the entire page and at that time, all server-side markup has been replaced by the client-side rendering markup. In Angular 16, the Angular team addresses this issue and solves this problem by reusing the already server-side rendered markup at the time of loading JavaScript bundles into the browser. So, in Angular 16, this becomes one of the major features that developer preview of Full Application based Non-Destructive Hydration. For this improvement, the Angular team worked with the Chrome Aurora Team related to improve performance for hydration and server-side rendering. Hydration functionality-related support is already provided by the other client-side framework like React and Next.js.

So, now, Agular 16, provides support for hydration out-of-the-box, and with the help of this, SSR-based applications will be much smoother and faster. With this, it will reduce the duration of time-to-interactive (TTI) and also provides improved support for SEO and accessibility.
To use the Server-side rendering in any application, need to install the @nguniversal/express-engine package first. After the package is installed, we can enable the non-destructive hydration with the help of Standalone API provideClientHydration.

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(),
  ]
};

06. Bind Route Param into Component Inputs Directly

In Angular 16, the developer will get a new experience while defining the Route param in any application. Now, developers can define the route config in such a way that the route parameters can be directly bound with the input parameters of the defined component of the route. So, for now, we do not need to use the ActivatedRoute to retrieve those values into the component as the router param value can be assigned directly to the component inputs. This feature will help us to remove lots of boiler code in the application. Now, we can assign the below values within a routing component as input params –

• Route data – can use resolvers and data properties as earlier.
• Path parameters
• Query Parameters.

const routes = [
  {
    path: 'contact-info',
    loadComponent: import('./contactDetails'),
    resolve: { contactId: () => fetchContact() }
  }
];

@Component(
  selector: 'contact-info',
  ......
)
export class About {
  // The value of "contact" is passed to the contact input
  @Input() contact?: string;
}

07. DestroyRef Introduced in Lifecycle

In Angular 16, two new rxjs-based operators or provider called DestroyRef and takeUntilDestroyer has been introduced into the lifecycle hook. These two methods are introduced as replacements for the ngOnDestroy lifecycle hook. By using the DestroyRef provider, we can register the destroy call back for any specific lifecycle scope. This provider can be used anywhere in the Angular Application like components, directives, embedded views, services, pipes, etc.

import { Injectable, DestroyRef } from '@angular/core';

@Injectable(
  ...
)

export class AppService {
  destroyRef = inject(DestroyRef);

  destroy() {
    this.destroyRef.onDestroy(() => /* code for cleanup */ );
  }
}

The other provider takeUntilDestroyed needs to be used in the constructor. For using this, we need to pass the destroyRef as an argument within this operation for using this from outside of the constructor. With the help of this new operator, we can clean up the signal effects automatically. We do not need to perform any manual cleanup like a clear subscription in rxjs.

08. ES Build Dev Server Support

In earlier versions of Angular, ESBuild support is already available during the use ng build command for build purposes. Now, in Angular 16, the angular team provides support for the ESBuild for ng serve command as well. This new bundler provides a faster and smaller bundle time compared to the previous (as per the experiment, bundle time is reduced by nearly 40% compared to earlier). But still, this new feature can only be used during the build of the application, not during the development time. Probably, in the coming Angular releases, it will be a part of the development server during the development process.

To enable this we need to change “@angular-devkit/build-angular:browser” to “@angular-devkit/build-angular:browser-esbuild”.

Other Features of Angular 16

In the above section, we discussed the major 8 key features introduced into the Angular 16 version. Besides these key features, some other features are released along with Angular 16. Some of the areas –

• Provides improved dependency injection along with Debugging APIs.
• Provide Improved documentation and schematics details related to Standalone Components.
• Provide support for CSS isolation, which prevents conflicts between the component styles and the application styles.
• It provides much-improved security in case of Cross-Site Scripting attacks. Now, Angular 16 supports native Trusted Types. With the help of this, browsers enforce strict rules for the use of any sensitive context within the application.
• In Angular Material, a new Date Range picker component is introduced along with Angular 16. This date range control provides selection features for both the start date and end date.
• Now, every Angular component is supported by self-closing tags.

Conclusion

There is no doubt that with Angular 16, there are lots of new features have been introduced. Probably, some of the features are still in the initial or developer preview mode. But instead of that, this new feature will change the code and application structure using Angular Framework. It also, helps us to reduce the existing boilerplate code related to the optimization of the application. This article will give you an overview of the new features of Angular 16. In the coming weeks, I will publish some more articles related to this new feature with step-by-step instructions. So, anybody can use this feature in their application. Related to this article, any queries or suggestions are always welcome.