What's new in Angular 17

The "Angular Renaissance" has been developing around for some time. According to me, it started with Angular's new IVY engine which replaced the legacy view engine. But especially when Standalone Components came into being and we got rid of NgModules, amazing features started popping up. And now we have Angular v17 released. One of the most amazing releases of Angular. It included a bunch of things, but here are the highlights:
- Standalone Components out of the box
- Better developer experience
- Esbuild and Vite
- Application Builder
- Template Control Flow
- Deferred Loading
- SSR out of the box
- Angular Signals being stable.
- A brand new and modern Angular logo
- Brand new angular docs with interactive editor (in beta at the moment).
Watch the entire video to get all the info.
📕 Angular Cookbook 2nd Edition is also about to be released in about a month or two. Subscribe to the notification at ng-cookbook.com
⚡Official Angular v17 announcement blog post:
blog.angular.io/introducing-a...
00:00:00 - Intro
00:00:10 - Angular v17 -- what
00:00:30 - Angular Renaissance
00:01:31 - Specifying component styles
00:01:45 - Standalone Components out of the box
00:02:22 - SSR & Hydration
00:02:52 - New built-in Control Flow
00:06:09 - Deferred Loading
00:07:30 - More v17 goodies
00:07:50 - Should you learn only what's new in v17 ??
00:08:44 - Why I've been waiting for v17

[@CodeWithAhsan]

What is your favorite feature about Angular v17?

[@abdulrehmanujjan]

SSR & Deferred Loading 😀

[@skyzane2735]

Do you have video of using Vitest for Angular?

[@chhikaras]

Having your video in the bottom right corner and content on the full screen would have been good.

[@tat1660]

well, as new in angular framework.. i'm trying to do projects with videos in yt. Is it better to do it in the 17 version or to change it to match better with the videos? everything throws me an error and nothing shows up on localhost

[@tat1660]

oh.. you answered this in the video :) ..how i change the version 17 i have with somethimg else?

[@onlyragz]

I have a folder called components with a subfolder called header which has the header files(css,ts,html), but when I go to app.component.html and write the tag , it tells me that "'app-header' is not a known element: 1. If 'app-header' is an Angular component, then verify that it is included in the '@Component.imports' of this component.", how can I solve this

[@CodeWithAhsan]

You have to import HeaderComponent in the ‘imports’ of the AppComponent

[@gillesashley9314]

That is because previously, the components were auto imported, now you have to manually import them.

[@stevepottz111]

Control flow deferred loading and asr

[@zimcoder]

Thet have borrowed the control flow from Blazor... this is similar to razor syntax.

[@CodeWithAhsan]

Yep. It is similar. But there were a lot of discussions about using the @ or #. So it wasn’t just that they just picked it up from razor :)

[@brewzonekeeone5724]

I said the same when I heard. Which is why ng feels like a "wolf a in sheep's clothing" a bit. Their changes are not just coding patterns like 'react hooks' for example .. they are syntax and notation changes. So devs have to re-learn how to put a dot on the screen and digest all sorts of concepts to get running. Why not just say they're making a TS version of razor and be done, because it'll never feel as "js spiffy" as the others? That being said I do use (and am familiar with) the 'angular' way, so ng17 here I come.

[@laughone]

is youtube developed using angular

[@CodeWithAhsan]

KZbin is built with another Google's internal framework

[@patriksimon3551]

How do we modify the following code

[@CodeWithAhsan]

Why do we need an *ngIf with an object? This condition will always be true. Oh, i believe it is for the “as” statement . You can do this @if( {..}; as vm ) { // use vm …. }

[@patriksimon3551]

@@CodeWithAhsan thanks, mate!