Angular 18 New Features

#angular #javascript #typescript #webdev

Angular, one of the leading frameworks for building web applications, has been consistently evolving to meet the demands of modern web development. With each iteration, it brings forth new features, optimisations, and improvements. As the community eagerly awaits the release of Angular 18, here’s a look at what we might expect from this next major version.

Angular 18 is set to be released in May 2024, and there are already several features confirmed for inclusion in the upcoming version that we can discuss.

Route Redirects with Functions

Angular 18 introduces a new feature for managing redirects. Now, instead of using strings, we can employ functions to specify the redirect URL within the redirectTo property of the Route object. This enhancement offers increased flexibility in routing and opens up new possibilities.

Within the function, the framework grants access to an object containing information about the URL.



// 
export const routes: Routes = [
  {
    path: 'page1',
    redirectTo: '/page2',
    pathMatch: 'full'
  }
]; 


//redirectTo function
export const routes: Routes = [
  {
    path: 'page1',
    redirectTo: (url) => { 
      return '/page2'; 
    },
    pathMatch: 'full'
  }
];

The function must return a string or a UrlTree. In Angular, a UrlTree is a data structure representing a URL. It’s essentially a parsed representation of a URL that Angular’s router uses to navigate within an application. The UrlTree encapsulates information such as the URL’s segments, query parameters, and fragments. It’s commonly used in Angular’s routing system for tasks like URL manipulation, navigation, and routing guards. By using UrlTree, Angular ensures consistent and reliable navigation behaviour within applications.

The “url” object contains all information about the route, including its data, title, query parameters, routing segment, and more.

New RedirectCommand

Angular version 18 introduces the new RedirectCommand class, designed to handle NavigationExtras. This addition allows for enhanced redirection capabilities within Guards and Resolvers. The integration of the RedirectCommand class greatly improves maintainability and flexibility, making it easier to manage complex navigation patterns in Angular applications.



const route: Route = {

  path: 'page1',

  component: PageComponent,

  canActivate: [

    () => {

      const router: Router = inject(Router);

      const urlTree: UrlTree = router.parseUrl('./page2');

      return new RedirectCommand(urlTree, { skipLocationChange: true });

    },

  ],

};

ng-content default content

Now it’s allowed to put the default content into the ng-content tag. This feature is a logical extension of the ng-content element. If there’s a tag for content, it follows that default content should be included within the tag itself.

For instance, if you have a component with ng-content in its template, you can also include default content that will be rendered if no content is provided for it.



<div>

   <h1>Header</h1>

   <ng-content>Default</ng-content>

</div>

Zoneless applications

One of the primary objectives of Signals is to enable applications to operate without zone.js. Initially, this would have been achievable solely through Signal Components. However, the landscape has since evolved. Now, it will be possible to achieve this without using Signal Components, starting with Angular 18, which is set to release next month.

Matthieu Riegler and Enea Jahollari have each published articles concentrating on this subject.

Matthieu’s article explores the new hybrid change detection system, where any Signal change, an async pipe, or any other operation that invokes markForCheck will now automatically trigger Change Detection, even if the operation occurs outside of zone.js (an edge case).

Enea’s article discusses the process of disabling zone.js entirely and depending solely on these new trigger mechanisms for managing application state changes.

https://justangular.com/blog/a-new-era-for-angular-zoneless-change-detection

Thanks for your reading!

I’d love to hear your thoughts, so please feel free to leave a comment, give a clap, or follow me. 👏

If you enjoyed this, consider sharing it with your community, tech friends, and anyone else you think might be interested. Also, don’t forget to follow me on LinkedIn for more updates!