Angular v18 is Now Available!

Angular 18 has been released, and it comes packed with improvements and surprises you won’t want to miss. If you liked the updates from previous versions, get ready—because this release takes the development experience to the next level. Let’s explore what’s new in Angular 18 together.

Collaboration Between Angular and Wiz

One of the biggest surprises this year at ng-conf, Angular’s largest conference, was the presentation of the collaboration between the Angular and Wiz teams. Does Wiz sound familiar? It is Google’s internal framework used to build performance-critical applications like Google Search, Google Photos, and YouTube. This collaboration promises to merge the best of both worlds, improving the development experience and optimizing applications.

Signals and the Transition to Zoneless Mode

Since Angular 16, signals have been making waves, and in Angular 18, they integrate even more deeply into the framework’s core. With the promise of a complete transition to a zoneless mode, signals become a stable and powerful tool. Goodbye @Input() decorator and hello to the new input() function, which offers optional and required inputs with a cleaner and safer syntax.

@Component(...)
export class MiComponente {
  optionalInput = input<number>();
  optionalInputWithDefaultValue = input<number>(5);
  requiredInput = input.required<number>(); 
}

Model: The Evolution of Inputs

What if I told you that you can now modify your input values directly? With the new model() function, Angular enables the creation of modifiable signals, facilitating two-way binding in an intuitive way.

@Component(...)
export class MyComponent {
  myModel = model(false);
  toggle(): void {
    this.myModel.set(!this.myModel());
  }
}

Signal Queries

Signal queries have also evolved. With the new viewChild(), viewChildren(), contentChild(), and contentChildren() functions, you can obtain references to DOM elements and components more efficiently and flexibly.

@Component(...)
export class MyComponent {
  divEl = viewChild<ElementRef>('el');
  cmp = viewChild(ChildComponent);
}

Improvements to Outputs

Angular 18 also brings enhancements to outputs with the output() function, which now offers a more consistent and safer syntax, replacing EventEmitter.

@Component(...)
export class MyComponent {
  valueChanged = output<string>();
  onValueChanged(msg: string): void {
    this.valueChanged.emit(msg);
  }
}

Fallback in ng-content

How many times have you wished you had default content when no content is passed into an ng-content tag? Now it’s possible! With Angular 18, you can easily define fallback content.

<ng-content select="header">Default header</ng-content>
<ng-content select="footer">Default footer</ng-content>

New Observable in Forms

Reactive Forms receive an upgrade with the new events Observable, which combines the valueChanges and statusChanges events, while adding new events like PristineChangeEvent and TouchedChangeEvent.

Hybrid Change Detection

Angular 18 introduces experimental change detection without Zone.js, boosting performance and enhancing the developer experience. With just a couple of modifications, you can enable this new feature and test its benefits.

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection(),
  ],
});

Wrapping up

Angular 18 not only improves existing functionality but also opens up new possibilities for web application development. What are you waiting for to try it out and share your thoughts?

Happy coding! 🎉

If you liked this article, don’t forget to share it on your social media and keep exploring the wonders of Angular.