So Angular 18 was released and I also released a big update to my Angular course and there will be more updates in the coming weeks but I did create a separate video regarding that. This video here is just about Angular 18 and what you can expect from that new version and which new features are added by Angular 18. And if I had to summarize Angular 18 in one single sentence it would probably be that Angular completes many developments that started in the past couple of weeks, months and even years to some extent. Because for example with Angular 18 the new control flow syntax, so the new if and for statements that you can add to your templates that was introduced in developer preview with Angular 17 is now marked as stable. And the same is true for deferable views, a feature that allows you to essentially lazy load parts of your templates based on different triggers. That's now also stable. In addition, and that's maybe the biggest thing, Angular 18 adds many new signal-related features, though to be fair pretty much all of these features have already been added to minor versions of Angular 17, but they're now of course also all part of Angular 18 and therefore if you do use Angular 18 you now got access to all these signal-related features, like of course signals themselves, but also signal-based inputs, so that instead of creating inputs with the input decorator and then having a non-signal value you can use a new input function to set up a component input as a reactive signal to which you then can subscribe just as you do it with any other signal you created on your own. So that can be pretty convenient. In addition, the Angular team also added a new output function so that you can also create outputs without a
decorator, though it's worth noting here that this actually won't create a signal, it has nothing to do with signals, instead this output function was simply added so that you don't have to use the add output decorator, also because it would kind of look strange if you have inputs without a decorator but output with a decorator. So that's why this function was added. And then there are more signal-related features like viewChild and contentChild and viewChildren and contentChildren queries that can now also be set up without using decorators. Instead you now have functions like the new viewChild function which makes it very easy to query for a element in your component view, so in your component template in the end, and what you get back by this function will be a signal that then in the end wraps this element you're querying, so that wraps this object you get back from viewChild. And since it's a signal, it's of course also reactive and can be used like any other signal. And in addition, you also don't have to use those viewChild, contentChild and so on decorators anymore. So you can kind of see a trend here where the Angular team really seems to be trying to reduce the amount of decorators being used in Angular projects. Last but not least, one other pretty exciting signal-related feature is the new model function which you can use to set up two-way bindable properties on your own custom components. And indeed, it makes setting up two-way binding on your own properties in your own components a breeze. And it's all done with help of signals so that you can use all your signals-related knowledge when using this new model function. And since all these signal-related features have been added, the Angular team also added one other crucial new feature to Angular. You can now get rid of zone.js. At least this feature was added in experimental status. So it's not stable yet, not recommended for production, but you can play around with it. And if you set up your application to not use zone.js by calling a special function and by getting rid of zone.js in your Angular JSON file, if you do that, then change detection will indeed only be driven by signals, by event listeners and a couple of other things, but not by having this all-covering watcher behind the scenes that watches all kinds of events that could potentially trigger change detection. So instead of having that, you now have this way more fine-grained change detection if you get rid of zone.js. And therefore, of course, the bundle size decreases because the zone.js library is no longer part of the project and potentially performance can improve because there isn't this watcher behind the scenes that watches all kinds of events that could trigger change detection. So that's a big thing, but it's only in experimental status right now. But of course we can expect that to change in future Angular versions. Now there also have been some minor new features and quality of life improvements that have been added with Angular 18. For example, you can now define fallback content when using content projection with ng-content simply by putting that fallback content between the ng-content tags. Previously, that was not possible. Now it is. Redirecting inside of guards is a bit easier because you can issue a redirect command there. And of course, in general, there are lots of fixes, some new deprecations, and lots of quality of life improvements also to the Angular dev tools and so on. Updating to this new version should be pretty straightforward though, because you can of course use ng-update, this command provided by the Angular CLI to get some help with that process. And also because of course all these features have been added in a backwards compatible way. Because as always, as with all the past Angular versions as well, the Angular team cares about backward compatibility. And they have to because the Angular landscape is pretty fragmented. There are lots of projects out there that still use pretty old Angular versions, if still use pretty old Angular versions, if you take a look at the npm download numbers of the Angular core package. So there is some fragmentation there, which could become a problem in the future, to be honest. But of course, due to that fragmentation, the Angular team is trying hard to make Angular as backwards compatible as possible. And to be honest, that is what they have done for years now. It's a super stable backwards compatible framework. And you can use these new features, but you don't have to. Of course, in my course update, I cover all these new features, but I also cover all the old syntax so that everyone gets as much as possible out of this course. But that's just a side note. Now, regarding the future of Angular, it's probably fair to assume that they'll keep on innovating. They have already hinted that they're looking to reduce the amount of decorators you're using. I mean, they have already added many new features that allow you to get rid of some decorators. And they'll probably continue down that road. They have hinted that they're looking into some new component authoring formats where you maybe can create components without the component decorator at some point in the future. They have also already shared that they're considering making RxJS optional so that you can probably use Angular features like the HTTP client without using RxJS under the hood. So that you can still use it in the project if you want to, but you don't have to. Because now with signals, there are two kind of similar concepts, even though there are differences and there are many advantages offered by RxJS. But of course, it's also an extra thing you have to learn with a quite steep learning curve. So that's something they're looking into making that optional. And in general, we can probably expect lots of new features that to make working with Angular a bit easier and to make the Angular syntax a bit more concise and less complicated, you could say. At least that is what it looks like. But of course, I'll keep you posted on this channel and I'll keep my course updated. Therefore, I hope this video was helpful. Definitely share any feedback you have. And if you haven't taken my course yet, now's the perfect time to join.
