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.
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';
}
}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');
}
}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'])
}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.
