DEV Community

Cover image for Episode 24/28: Angular 18.1
ng-news for This is Angular

Posted on

8

Episode 24/28: Angular 18.1

Angular 18.1 is out.

Compared to the minor releases in the 17 series, it doesn't bring many new impactful features. Nevertheless, the feature everyone is talking about, which has been a little—one could say—over-hyped on Twitter, is the new let syntax.

It allows us to assign a value to a template variable. Since it doesn't open the doors to completely new features, we should see it as a syntactic improvement.

Netanel Basal has written an article covering the simplifications/patterns that the let syntax brings.

Exploring Angular’s New @let Syntax: Enhancing Template Variable Declarations | by Netanel Basal | Netanel Basal

Angular’s evolution continues with exciting new features, including the recently merged @let syntax, which is now avilalabe in…

favicon netbasal.com

Other noteworthy features of the minor release are the update to TypeScript 5.5 which comes with inferred type predicates.

@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

Uncalled functions in event listeners now throw an error. This applies to event listeners only, not for property binding in combination with 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

Finally, the routerLink directive accepts now also an UrlTree.

@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

For more information, head to the official ChangeLog, the recording of the Q&A session, the blog posting for the let syntax, and, of course, all the various articles, etc. from the community.

What’s new in Angular 18.1? | Ninja Squad

Angular 18.1 is out!

favicon blog.ninja-squad.com

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (1)

Collapse
 
jangelodev profile image
João Angelo

Hi ng-news,
Top, very nice and helpful !
Thanks for sharing.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay