TL;DR: Angular 18 boosts performance with zoneless change detection and improved signal debugging. It also offers more flexible routing options with function-based redirects and simplifies data flow with a new input function. Plus, developers can leverage robust Firebase app hosting, enhanced server-side rendering, and Form’s new control state change events. Let’s explore these ground-breaking features!
The new Angular 18 enhances the stability of the existing features introduced in Angular 17 and includes exciting new additions.
Let’s explore the latest updates in Angular 18 in detail.
Angular 18 has solidified the preview features from previous versions and introduced several new capabilities. Let’s take a closer look at these enhancements:
Let’s dive deeper into these top features and see how they can enhance your development workflow.
A new feature, zoneless change detection using signal, is now available for experimentation. This feature aims to improve performance by reducing the overhead associated with traditional change detection methods.
To integrate this feature into your Angular app, we need to add the provider like in the following code example:
bootstrapApplication(App, {
providers: [
provideExperimentalZonelessChangeDetection(),
]
}); After adding the provider, remove the zone.js file from your polyfills in the angular.json file. Refer to the Angular without ZoneJS (Zoneless) documentation for more details.
Advantages of removing ZoneJS:
Let’s see an example of zoneless change detection in action with signals.
@Component({
...
template: `
<h1>Greeting from {{ greeting() }}!</h1>
<ejs-button (click)="click()">Change</ejs-button>
`,
})
export class App {
protected greeting = signal(‘Syncfusion’);
click() {
this.name.set(‘Syncfusion Components’);
}
} In the above-created Angular component, a greeting message updates dynamically when the button is clicked, showcasing the utilization of a signal for state management within the component.
In Angular 18, a new feature allows dynamic route redirects based on runtime conditions. The redirectTo property accepts a function that returns a string, offering enhanced flexibility in redirect handling.
Refer to the following code example.
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{
path: 'dashboard',
redirectTo: ({ queryParams }) => {
const errorHandler = inject(ErrorHandler);
const adminParam = queryParams['admin'];
if (adminParam === 'true') {
return `/admin/dashboard`;
} else if (adminParam === 'false') {
return `/user/dashboard`;
} else {
errorHandler.handleError(new Error(
'Attempted navigation to dashboard without specifying admin status.'
));
return `/not-found`;
}
},
},
]; In this setup, the redirectTo function examines the query parameters to determine the appropriate destination route. If the admin parameter is true, the user is redirected to the admin dashboard; if it’s false, they are directed to the user dashboard. Any other scenario results in an error handling message and redirection to a not-found page.
This dynamic routing approach enhances user experience by adapting redirects based on runtime conditions, ensuring smooth navigation and graceful error handling.
The new Angular Signal API is currently in developer preview and represents a significant advancement in reactive programming. Signals provide a robust mechanism for managing state and data flows, enhancing apps’ dynamism and responsiveness.
Introduced in versions 17.1 and 17.2, the Signal provides Angular components with a streamlined approach to react to data changes, ensuring that the UI remains synchronized with the app state.
The new input syntax simplifies data passing into components, improving code readability and maintainability. Here’s an example.
Import { Component, Input } from ‘@angular/core’;
@Component({
selector: ‘app-product-details’,
template: `
<div>
<ejs-textbox [(ngModel)]="productName"></ejs-textbox>
<ejs-textbox [(ngModel)]="productCategory"></ejs-textbox>
<ejs-textbox [(ngModel)]="productPrice" type="number"></ejs-textbox>
</div>
`
})
export class ProductDetailsComponent {
productName = Input<string>(); // Signal<string|undefined>
productCategory = Input.required<string>(); // Signal<string>
productPrice = Input(0); // Signal<number>
} In this example, the ProductDetailsComponent includes three Syncfusion ejs-textbox components to allow editing of the productName, productCategory, and productPrice. The ngModel directive binds each ejs-textbox to the corresponding input signal, making the component dynamic and interactive while integrating with Syncfusion’s Angular UI components.
The new output syntax also makes event handling more straightforward and intuitive. As Angular refines these features based on user feedback, the Signal API is set to become a crucial part of building robust and high-performance web apps.
import { Output, Directive } from '@angular/core';
@Directive({
selector: '[appCustomDirective]',
})
export class CustomDirective {
nameUpdated = new Output(); // OutputEmitterRef<string>
buttonClicked = new Output(); // OutputEmitterRef<void>
updateName(newName: string): void {
this.nameUpdated.emit(newName);
}
handleClick(): void {
this.buttonClicked.emit();
}
} Note: You can check out the Angular signals guide for more details on using these new APIs.
Angular 18 brings many exciting improvements, building on the innovations introduced in Angular 17. The key features that are now stable in this release include:
In Angular 18, the Firebase app hosting feature has been introduced, revolutionizing the deployment of dynamic Angular apps. This hosting service simplifies the management of hybrid rendering complexities, including server-side, pre-rendering, and client-side rendering.
Announced at Google I/O, it seamlessly integrates with Angular frameworks and offers GitHub support, making deployment effortless. Furthermore, its integration with Firebase products like Authentication, Cloud Firestore, and Vertex AI adds an extra layer of functionality.
As a developer, I’m excited to see how Firebase app hosting enhances the Angular development experience.
In version 18, we can add default content for the ng-content so that the result of this default content is displayed even if no content is projected in the component.
Refer to the following code examples.
@Component({
selector: ‘app-custom-widget’,
template: `
<ng-content select=".header">Default Header</ng-content>
<ng-content>Default Content</ng-content>
`,
})
export class CustomWidgetComponent {} <app-profile> <span class="header">New Header </span> </app-profile>
In the above examples, the CustomWidgetComponent displays a default header if content with the class header is projected into it. If no content is projected, it shows the Default Content. This feature provides more flexibility in component usage and enhances user experience by ensuring that the relevant content is always displayed.
Angular Form control introduces a new property called events, enabling subscription to a stream of events for form controls. This property facilitates easy tracking of form state changes such as value changes, touch state, pristine status, and control status.
Refer to the following code example.
const nameControl = new FormControl<string|null>('name', Validators.required);
nameControl.events.subscribe(event => {
if (event.type === 'valueChange') {
console.log('Value changed to:', event.value);
} else if (event.type === 'statusChange') {
console.log('Control status changed to:', event. Status);
}
}); With this feature, developers can efficiently monitor and respond to various form control state changes, enhancing the overall form management experience in Angular apps.
Recently, Angular announced a major project aiming to merge with Google’s internal framework, Wiz. Previously, Angular and Wiz catered to different app segments — Wiz focused on consumer apps for top performance, while Angular prioritized productivity and developer experience.
In a recent development, one of Google’s core libraries, event dispatch (formerly jsaction), is now part of Angular’s monorepo starting from version 18. The event dispatch powers event replay during hybrid rendering, enhancing user experience.
You can enable it using the withEventReplay() method. Refer to the following code example.
bootstrapApplication(App, {
providers: [
provideClientHydration(withEventReplay()),
],
}); In the v18 release, Angular has also been updated to Typescript 5.4 to take advantage of the latest Typescript features.
Thanks for reading! Angular 18 marks a significant advancement in the framework’s journey, with a wide range of improvements and added stability to existing features.
Angular 18 introduces zoneless change detection, dynamic route redirects, enhanced form control state events, and Firebase app hosting integration, simplifying deployment, and increasing component versatility with ng-content fallback. Angular Signals improve state management, and updates to TypeScript 5.4 keep it current. Collaborations with Google’s Wiz and event replay for hybrid rendering enhance performance and user experience, empowering developers to create dynamic, responsive, feature-rich apps.
The Syncfusion Angular UI components library also supports Angular version 18. This is the only suite you will ever need to build an app since it contains over 85 high-performance, lightweight, modular, and responsive UI components in a single package.
For existing Syncfusion users, the product setup is available for download on our website. If you’re new to Syncfusion, we invite you to sign up for our free 30-day trial.
We value your questions and feedback. Feel free to share your thoughts in the comments section below or reach out to us through our support forum, support portal, or feedback portal. We’re always here to help you!