Angular has always been on a consistent path to bring innovation to meet the demands and overcome the challenges of developers. With each version, new features, optimizations, and improvements come forth. The next version of Angular 18 is what the Angular community looked forward to. The latest version Angular 18 was launched on 24th April and is now available for developers. There is a multitude of new features that will be added in the major release.
The latest version Angular 18 brings a multitude of new features:
Angular 17 focused on features enhancing developer experience and application performance maintenance while also supporting the stability of existing projects. In Angular 18, the new features focus on improving performance and making programming smooth for developers.
The Angular 18 Features.
Progressing Change Detection
Shifting to Zoneless
Native Async For Zoneless Apps
Debugging and SSR Improvements
Partial Hydration Strategy
Control State Change Events
Fallback Content for ng-content
Route Redirects as Functions
Previously, Angular’s change detection triggering is responsible for a library called zone.js. The library has certain downsides including performance challenges. Angular has been trying for years to find a way that doesn’t rely on zone.js. Now they have shared an experimental API for Zoneless.
To make it work, include provideExperimentalZonelessChangeDetection to your bootstrap application:
bootstrapApplication(App, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});Once you have added the provider, remove zone.js from your polyfills in angular.json.
The Ideal Way to Use Zoneless is with Signals in Component
@Component({
...
template: `
<h1>Hello from {{ name() }}!</h1>
<button (click)="handleClick()">Go Zoneless</button>
`,
})
export class App {
protected name = signal('Angular');
handleClick() {
this.name.set('Zoneless Angular');
}
}Enhanced composability for micro-frontends and interoperability with different frameworks
Quicker initial render and runtime
Improved debugging
Better readable stack traces
Zoneless is the core change in the evolution made by Angular. While the changes are made, they have made sure that all the existing APIs continue to work the same way and that there is good interoperability with everything new in Angular.
Zoneless is one such story relating to interoperability. They also made sure that shifting your existing apps into zoneless stays simple. Therefore, if the components are compatible with ChangeDetectionStrategy.OnPush change detection strategy, your components are compatible with zoneless and the shift will be smooth.
Default Coalescing
With the latest version of Angular, we will utilize the scheduler for zoneless apps and apps using zone.js by enabling coalescing. Zone coalescing by default is also enabled to minimize the number of change detection cycles. The significance of this feature is it is only available for new applications. The existing apps based on previous change detection behavior can cause bugs if enabled.
If you want to go for event coalescing in the ongoing project, integrate NgZone provider in bootstrapApplicationbootstrapApplication:
bootstrapApplication(App, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true })
]
});One of the APIs that zone.js can’t monkey patch is the async/await, despite being able to intercept many browsers to plug Angular’s change detection in. Thus, they have leveled down to promises via the Angular CLI.
Today if you build an app by using the experimental zoneless change detection Angular CLI, it will use the native async without downleveling it to promises. This will lead to small bundles and enhanced debugging.
Signal APIs in Developer Preview
The new signal inputs, a new output syntax, and signal-based queries were all introduced in Angular 17.1 and 17.2. The signal guide has all the insights on how to use the APIs. The iterations on implementation are continuous based on developers’ feedback.
Stabilized Material 3
The beta or experimental version of Material 3 was introduced a few months ago. Since then they have taken continuous feedback from developers and refined all the Material 3 components. Now the version can be considered stable.
For example,
If you wish to define or change the theme, you can use the below code:
@use '@angular/material' as mat;
$theme: mat.define-theme((
color: (
theme-type: dark,
primary: mat.$violet-palette,
),
typography: (
brand-family: 'Comic Sans',
bold-weight: 900
),
density: (
scale: -1
)
));
Customize the theme with:
@use '@angular/material' as mat;
@use './path/to/m3-theme'
@include mat.core();
html {
// Apply the light theme by default
@include mat.core-theme(m3-theme.$light-theme);
@include mat.button-theme(m3-theme.$light-theme);
}Deferrable views have always been in the talks and developers are quite excited about it. The reason behind this is excitement was enabling this will improve their app’s Core Web Vitals. Angular also presented that Bill.com shared that using @defer significantly reduced the bundle size of their app and that too by 50%. Developers are free to use deferrable views in their applications and libraries.
In Angular version 17, along with deferrable views built-in control flow was also announced to perform at optimum. This new syntax was actively adapted by the Angular community and it is officially stable. In the process of improvement, the control flow’s type checking was updated along with the incorporation of ergonomic implicit variable aliasing. Some performance-related anti-patterns received set guardrails.
In the Angular 18 version, the official website for documentation in Angular is angular.dev. With the new look and feel, you can find tutorials in WebContainers, an intuitive playground with examples, and refreshed guides.
Over the last one and a half years, Angular has relentlessly worked on making this website a success. All requests that will be made from Angular.io will now be directed to angular.dev.
In this version, major improvements have been made to ensure that developers can enhance the application building process and time and efforts are substantially saved.
According to statistics, 76% of the Angular 17 apps that make use of prerendering or server-side rendering already use hydration. The lack of i18n support made it difficult for everyone to use it. Therefore, in the Angular 18 version, hydration for i18n blocks is available for developers in developer preview mode
The Angular DevTools are updated to perceive Angular’s hydration process. Besides every component, you will find an icon presenting the component’s hydration status. An overlay mode can also be used to understand which component Angular hydrated on the page. Also, in the component explorer Angular DevTools will let you check the hydration errors in the application.
Partial hydration is a method that permits you to hydrate your app serially after server-side rendering. The partial hydration was introduced at ng-conf and Google I/O. The incremental hydration in your application incorporates improved performance and loading limited JavaScript upfront.
In the process, instead of rendering the @placeholder block on the server as it's happening in the present, you are able to have a mode where Angular will render the primary content of the @defer block on the server. Angular on the client side will download the associated JavaScript and hydrate a deferrable block. This is achieved only when the trigger conditions mentioned in the template are met.
For example:
@defer (render on server; on viewport) {
<app-calendar/>
}The block above will render the calendar component on the server. After it reaches the client, Angular will download the corresponding JavaScript and hydrate the calendar making it interactive once it enters the viewpoint.
A property called events is now exposed by Angular forms from FormControl, FormGroup, and FormArray classes. This allows you to subscribe to a stream of events for this form control. You can analyze changes in value, pristine status, touch state, and more.
const nameControl = new FormControl<string|null>('name', Validators.required);
nameControl.events.subscribe(event => {
// process the individual events
});One major issue that Angular has consistently heard is specifying default content for ng-content. Angular has heard and made sure change is done therefore it is now available. An example for this is:
@Component({
selector: 'app-profile',
template: `
<ng-content select=".greeting">Hello </ng-content>
<ng-content>Unknown user</ng-content>
`,
})
export class Profile {}Now you can use the component as follows:
<app-profile>
<span class="greeting">Good morning </span>
</app-profile>This will result in:
<span class="greeting">Good morning </span>
Unknown userIn the 18th version of Angular, redirectTo now takes a function that returns a string. This is enabled to become more flexible when dealing with redirects. If you want to redirect to a route that relies on some runtime state, you can implement an intricate logic in function:
const routes: Routes = [
{ path: "first-component", component: FirstComponent },
{
path: "old-user-page",
redirectTo: ({ queryParams }) => {
const errorHandler = inject(ErrorHandler);
const userIdParam = queryParams['userId'];
if (userIdParam !== undefined) {
return `/user/${userIdParam}`;
} else {
errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));
return `/not-found`;
}
},
},
{ path: "user/:userId", component: OtherComponent },
];The application builder was announced in Angular version 17 and was incorporated by default for new projects. For most of the applications, developers updated to the new build system by updating their angular.json.
In the latest version, since the Webpack was not on a critical road of the new build system, Angular kept the dependencies optional. This in turn reduced the dependencies for the Angular CLI by 50%. It will certainly save time and boost the Angular CLI installation.
When it comes to performance, scalability, trustworthiness, and efficiency, the hosting of the application plays a pivotal role. Managing the hosting manually is a complicated undertaking. So to keep the complication away, Firebase App Hosting is here.
The Firebase App Hosting optimizes the building and deployment of Angular applications, providing built-in framework support. This is not all, it also provides GitHub integration and integration with other Firebase products like Cloud Firestore, Authentication, and Vertex AI.
Angular 18 turns out to be the new reactivity model for developers. For the new projects, it is recommended by the Angular community to have a strong knowledge of Angular 17 and then shift to Angular 18. The latest framework will ensure simple code and improvements in the components and tools. The future version will soon be released and have a significant impact. After testing, we can be sure of the version. The decorators in Angular 18 will be beneficial to the developers and are upgraded better from the previous version.
Also Read: Angular v19 Released: Top Features and Updates
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.
