This content originally appeared on DEV Community and was authored by ng-news
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 | May, 2024 | Netanel Basal
Angular’s evolution continues with exciting new features, including the recently merged @let syntax, which is now avilalabe in…
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';
}
}
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.
Live coding and Q/A with the Angular Team | July 2024 - YouTube
Angular Community, join Jeremy Elbourn and Mark Thompson as they answer questions and have some fun!
youtube.com
blog.ninja-squad.com
Introducing @let in Angular. Authors: Mark Thompson, Kristiyan… | by Angular | Jul, 2024 | Angular Blog
Authors: Mark Thompson, Kristiyan Kostadinov
blog.angular.dev
This content originally appeared on DEV Community and was authored by ng-news
ng-news | Sciencx (2024-07-19T21:34:52+00:00) Episode 24/28: Angular 18.1. Retrieved from https://www.scien.cx/2024/07/19/episode-24-28-angular-18-1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.