Angular recently launched Angular 18, which brings several new features, including zoneless change detection, a new developer hub, and improved server-side rendering. This version focuses on stabilizing new APIs, responding to developer requests, and enhancing the developer experience.

Angular 18 now supports zoneless change detection experimentally, removing the need for zone.js. This aims to improve performance by reducing change detection cycles and providing clearer stack traces. Developers can try this new feature by adding a provider to their application bootstrap:

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

Alex Rickabaugh, a senior software engineer at Google, expressed the importance of zoneless support in Angular 18, emphasizing the balance between maintaining stability and evolving with the modern web.

The official Angular documentation site, angular.dev, now includes a hands-on getting started guide, interactive playgrounds, updated guides, and easier navigation. All requests to angular.io now redirect to angular.dev.

Several features have become stable in Angular 18. Material 3 components are now stable, offering new themes and documentation. Deferrable views, which help improve Core Web Vitals, are now stable and allow developers to delay the loading of certain views. The new built-in control flow syntax also reaches stability, offering better performance and usability.

Server-side rendering (SSR) in Angular 18 is improved with i18n hydration support, enhanced debugging, and event replay using Google's event dispatch library. These improvements ensure a better and more interactive SSR experience.

Angular 18 allows developers to specify default content for ng-content, providing fallback content in their components. For example:

@Component({
  selector: 'app-profile',
  template: `
    Hello 
    Unknown user
  `,
})
export class Profile {}

Using the component:

<app-profile>
  <span class="greeting">Good morning </span>
</app-profile> 

<span class="greeting">Good morning </span>
Unknown user 

const nameControl = new FormControl('name', Validators.required);
nameControl.events.subscribe(event => {
  // Process individual events
});

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 },
];