Angular 18.1 is out.

In contrast to the 17-series minor updates, this release delivers only a handful of noteworthy additions. Still, the headline feature that has sparked plenty of discussion—arguably a touch oversold on X—is the fresh let syntax.

This syntax lets you bind a value to a template variable. Since it doesn't unlock any fundamentally new capabilities, it’s best viewed as a convenience.

Netanel Basal has published a piece examining how the let syntax simplifies existing patterns.

Episode 24/28: Angular 18.1 — figure 1

Taking a Closer Look at Angular’s New @let Syntax: Upgrading Template Variable Declarations | by Netanel Basal | Netanel Basal

The Angular framework keeps pushing forward with fresh capabilities, including the recently integrated @let syntax, which is currently accessible in…

favicon

This minor version also upgrades TypeScript to 5.5, introducing support for inferred type predicates in the language.

@Component({
  selector: 'app-root',
  standalone: true,
  template: ``
})
export class AppComponent {
  message$: Observable<string> = inject(HttpClient).get('http://www.host.com/message').pipe(filter(value => this.isString(value)));

  isString(value: unknown) {
    return typeof value === 'string';
  }

  // before TypeScript 5.5
  isStringExplict(value: unknown): value is string {
    return typeof value === 'string';
  }
}
Enter fullscreen mode Exit fullscreen mode

A failure is now reported when event listeners reference functions that are never invoked. This rule pertains solely to event listeners; it does not extend to property bindings that involve Signals.

@Component({
  selector: 'app-root',
  standalone: true,
  // click get a warning
  template: `<button (click)="sayHi")>Say hi</button>`
})
export class AppComponent {
  sayHi() {
    console.log('hi');
  }
}
Enter fullscreen mode Exit fullscreen mode

To wrap things up, the routerLink directive now also supports UrlTree as an accepted input.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLinkWithHref],
  template: `<a [routerLink]="adminLink">Admin</a>`
})
export class AppComponent {
  adminLink = inject(Router).createUrlTree(['admin', {site: 'basic'}, 'main'])
}
Enter fullscreen mode Exit fullscreen mode

Be sure to check the official ChangeLog, the Q&A session recording, the blog post covering the let syntax, and all the community articles and other resources for further details.

youtube.com
Episode 24/28: Angular 18.1 — figure 3

What’s new in Angular 18.1? | Ninja Squad

Angular 18.1 has been released.

favicon blog.ninja-squad.com Episode 24/28: Angular 18.1 — figure 5

@let in Angular — what’s coming next. By Mark Thompson, Kristiyan… | Angular Blog | Medium

Written by Mark Thompson and Kristiyan Kostadinov

favicon blog.angular.dev