Angular 16 new features
Angular has recently published its first release candidate version of version 16, which promises a plethora of new features and changes. This upcoming release appears to introduce more significant updates compared to any previous major release.
Signals:
By leveraging the Angular Signals library, developers can define reactive values and establish dependencies between them. This powerful feature enables developers to create more dynamic and responsive applications, as changes to one value can automatically trigger updates to other dependent values. Overall, this functionality provides a more intuitive and streamlined approach to handling complex data dependencies in Angular applications.
The introduction of signals in Angular can significantly improve the framework’s performance. By providing precise information on the exact models that have changed, Angular can make fine-grained updates to the template instead of having to dirty-check the entire application. This level of granular control enables Angular to become much more efficient in how it updates the user interface, resulting in a faster and more responsive application overall.
The new “Signal” component in Angular can alleviate performance-related concerns for developers, even in cases where non-optimal code is written. With the integration of this component, concepts such as changeDetectionStrategy, the onChanges lifecycle hook, and even pipes may become less necessary. This can help to reduce the potential for developers to make mistakes that could negatively impact the performance of their application, thereby making it easier for developers to achieve optimal performance.
@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>`,
});
export class App {
firstName = signal('Jane');
lastName = signal('Doe');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
constructor() {
effect(() => console.log('Name changed:', this.fullName()));
}
setName(newName: string) {
this.firstName.set(newName);
}
}
Ref: https://blog.angular.io/angular-v16-is-here-4d7a28ec680dtakeUntilDestroyed and DestroyRef:
In Angular, it’s common to want to complete a stream when a related subject completes. Typically, developers achieve this by creating a ReplaySubject and utilizing the `takeUntil` operator to tie it to the component’s lifecycle. However, a new RxJS operator called `takeUntilDestroy` aims to simplify this process. With this new operator, the above code can be rewritten as follows:
myDetails$ = http.get('…').pipe(takeUntilDestroyed(this));This operator automatically injects the current cleanup context, which is particularly useful when tying the lifecycle of an Observable to a specific component. In this example, `takeUntilDestroyed()` is used to ensure that the stream is destroyed when the component is destroyed. This operator provides a more concise and intuitive solution to managing the lifecycle of Observables in Angular applications.
Required input:
Developers who are familiar with React and other frameworks may be accustomed to passing props to components, some of which can be marked as required. This is a useful feature as it can help catch errors during development if required props are not passed. Until now, this feature was not natively available in Angular, which has been a source of frustration for some developers. However, TypeScript now offers a solution with its “strictNullChecks” feature.
By enabling this feature, developers can mark specific props as required and TypeScript will throw an error if those props are not passed. This provides a useful tool for improving code quality and reducing the potential for errors in Angular applications.
@Component({})
class EmployeeDetails {
@Input({required: true}) employeeData;
}Esbuild dev server:
If you’re an Angular developer, you’ll be excited to hear about some exciting changes coming in the latest version of Angular. One of the most significant updates is the use of Vite for the development server in ng serve. Additionally, esbuild now powers both development and production builds.
It’s worth noting that Angular CLI now exclusively relies on Vite as a development server. While this is a significant change, it’s important to remember that the Angular compiler needs to maintain a dependency graph between components to support selector matching. As a result, the Angular compiler requires a different compilation model than Vite.
If you’re interested in trying out Vite + esbuild, you can easily update your angular.json file to include the esbuild suffix in the build section…
...
"architect": {
"build": { /* Add the esbuild suffix */
"builder": "@angular-devkit/build-angular:browser-esbuild",
...Server-side rendering and hydration enhanced
Hydration is the process of restoring the server-side rendered application on the client. This includes reusing the server-rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes.
Angular developers have been requesting a major feature for a long time, and it’s finally here with the upcoming release of Angular v16. This feature is critical for building enduser-facing applications where initial startup time and SEO are essential. Without it, many developers have been hesitant to use Angular.
Angular Universal has provided some level of Server Side Rendering (SSR) support, but only with destructive hydration of the application. This leads to a janky user experience for users. With v16, Angular now enables real, non-destructive hydration of server-rendered applications. This, combined with http request caching, can significantly reduce the first render time and improve web vitals for Angular applications.
The benefits of this feature are numerous, including no content flickering on a page for end-users, better Web Core Vitals in certain scenarios, and a future-proof architecture that enables fine-grained code loading with primitives that will be shipped later this year.
Currently, this surfaces in progressive lazy route hydration, making integration with existing apps easy in just a few lines of code. Additionally, incremental adoption of hydration is possible with the ngSkipHydration attribute in templates for components performing manual DOM manipulation.
Other Features:
- Better unit testing with Jest and Web Test Runner
- Autocomplete imports in templates
- RxJS interoperability
- Improved tooling for standalone components, directives, and pipes
