eeewqewqeqsadqw
w ewqewewq ewqwq
wqeqe wqw
eqwewe
wqeqwe
ewqqwqw
wqqweqw qeewqe
e
testtings this marvelous caption
wqewqewqewqe
wq
ewq
ewqe
wq
ewqe
wq
Title for this magificent body
ainda n foi desta
weerwer
improvements!
Future-looking identity
Angular’s renaissance has been going with full steam for the past couple of versions. We’ve been picking up momentum with improvements such as signal-based reactivity, hydration, standalone components, directive composition, and dozens of other features. Despite the rapid evolution of Angular, its branding has not been able to catch up — it has been almost identical since the early days of AngularJS.
Today, the framework you love, battle tested by millions of developers gets a new look reflecting its future-looking developer experience and performance!
Animation that starts with the original red shield Angular logo and then morphs into the new hexagonal logo with a purple-to-pink gradient and bolder letter A.
Future-looking documentation
Together with the new brand we also developed a new home for Angular’s documentation — angular.dev. For the new documentation website we have new structure, new guides, improved content, and built a platform for an interactive learning journey that will let you learn Angular and the Angular CLI at your own pace, directly in the browser.
The new interactive learning experience is powered by WebContainers and lets you use the power of the Angular CLI in any modern web browser!
Gif showing the new interactive Angular tutorial using Web Containers.
Interactive Angular tutorial with WebContainers
Today we’re launching a beta preview of angular.dev and planning to make it the default website for Angular in v18. You can learn more about Angular’s new look and angular.dev in “Announcing angular.dev.”
Now let me dig into the features from v17 that we can’t wait to tell you about!
Built-in control flow
To improve developer experience, we’ve released a new block template syntax that gives you powerful features with simple, declarative APIs. Under the hood, the Angular compiler transforms the syntax to efficient JavaScript instructions that could perform control flow, lazy loading, and more.
We used the new block syntax for an optimized, built-in control flow. After running user studies we identified that a lot of developers struggle with *ngIf, *ngSwitch, and *ngFor. Working with Angular since 2016 and being part of the Angular team for the past 5 years, I personally still have to look up the syntax of *ngFor and trackBy. After collecting feedback from the community, partners, and running UX research studies, we developed a new, built-in control flow for Angular!
The built-in control flow enables:
More ergonomic syntax that is closer to JavaScript, thus more intuitive requiring fewer documentation lookups
Better type checking thanks to more optimal type narrowing
It’s a concept that primarily exists at build-time, which reduces the runtime footprint (making it “disappearing”) which could drop your bundle size by up to 30 kilobytes and further improve your Core Web Vital scores
It is automatically available in your templates without additional imports
Significant performance improvements that we’ll cover in a little bit
Conditional statements
Let’s look at a side by side comparison with *ngIf:
The user is not logged in
With the built-in if statement, this condition will look like:
@if (loggedIn) {
The user is logged in
} @else {
The user is not logged in
}
Being able to provide the content for @else directly is a major simplification compared to the else clause of the legacy *ngIf alternative. The current control flow also makes it trivial to have @else if, which historically has been impossible.
The improved ergonomics is even more visible with *ngSwitch:
which with the built-in control flow turns into:
@switch (accessLevel) {
@case ('admin') { }
@case ('moderator') { }
@default { }
}
The new control flow enables significantly better type-narrowing in the individual branches in @switch which is not possible in *ngSwitch.
Built-in for loop
One of my most favorite updates is the built-in for loop that we introduced, which on top of the developer experience improvements pushes Angular’s rendering speed to another level!
Its basic syntax is:
@for (user of users; track user.id) {
{{ user.name }}
} @empty {
Empty list of users
}
We often see performance problems in apps due to the lack of trackBy function in *ngFor. A few differences in @for are that track is mandatory to ensure fast diffing performance. In addition, it’s way easier to use since it’s just an expression rather than a method in the component’s class. The built-in @for loop also has a shortcut for collections with zero items via an optional @empty block.
The @for statement uses a new diffing algorithm and has more optimal implementation compared to *ngFor, which makes it up to 90% faster runtime for community framework benchmarks!
Community benchmarks showing the performance improvements introduced by the new control flow. Row swapping became significantly faster compared to previous benchmarks and there are visible improvements in all other categories.
A comparison of the performance of the built-in for statement versus *ngFor from the js-framework-benchmarks from https://krausest.github.io/js-framework-benchmark/current.html
Give it a try!
The built-in control flow is available in v17 under developer preview today!
One of the design goals of the built-in control flow was to enable completely automated migration. To try it in your existing projects use the following migration:
ng generate @angular/core:control-flow
What’s next?
You can already use the built-in control flow with the latest language service and we worked closely with JetBrains to enable better support in their products. We’re also in contact with Sosuke Suzuki from Prettier to ensure proper formatting of Angular templates.
There are still some differences between how the built-in control flow handles content projection compared to *ngIf, *ngFor, and *ngSwitch, and we’ll be working on them over the next months. Aside from that, we’re confident in the implementation and stability of the built-in control flow so you can give it a try today! We’d like to keep it under developer preview until the next major release so that we can open the door for potential backward incompatible fixes in case we find opportunities to further enhance developer experience.
Deferrable views
Now let’s talk about the future of lazy loading! Leveraging the new block syntax we developed a new, powerful mechanism you can use to make your apps faster. At the beginning of the blog post, I said that deferrable views bring performance and developer experience to the next level because they enable declarative and powerful deferred loading with unprecedented ergonomics.
The visual shows a component tree where we defer the loading of the left subtree.
Component tree where we defer the loading of the left subtree
Let’s suppose you have a blog and you’d like to lazily load the list of user comments. Currently, you’d have to use ViewContainerRef while also managing all the complexity for cleanups, managing loading errors, showing a placeholder, etc. Taking care of various corner cases may result in some non-trivial code, which will be hard to test and debug.
The new deferrable views, allow you to lazily load the list of comments and all their transitive dependencies with a single line of declarative code:
@defer {
}
The most incredible part is that this all happens via a compile-time transformation: Angular abstracts all the complexity by finding components, directive and pipes used inside of a @defer block, generating dynamic imports and managing the process of loading and switching between states.
Starting to lazily load a component when a certain DOM element enters the viewport involves a lot of more non-trivial logic and the IntersectionObserver API. Angular makes using IntersectionObservers as simple as adding a deferrable view trigger!
@defer (on viewport) {
} @placeholder {
}
In the example above, Angular first renders the contents of the placeholder block. When it becomes visible in the viewport, the loading of the component starts. Once the loading is completed, Angular removes the placeholder and renders the component.
There are also blocks for loading and error states:
@defer (on viewport) {
} @loading {
Loading…
} @error {
Loading failed :(
} @placeholder {
}
That’s it! There’s a ton of complexity under the hood that Angular manages for you.
Deferrable views offer a few more triggers:
on idle — lazily load the block when the browser is not doing any heavy lifting
on immediate — start lazily loading automatically, without blocking the browser
on timer(
The user is logged in
}
In the example above, Angular first renders the contents of the placeholder block. When it becomes visible in the viewport, the loading of the
}
That’s it! There’s a ton of complexity under the hood that Angular manages for you.
Deferrable views offer a few more triggers:
on idle — lazily load the block when the browser is not doing any heavy lifting
on immediate — start lazily loading automatically, without blocking the browser
on timer(Keep exploring for FREE!
Create a free account or log in to unlock content, event past recordings and more!