What's new in Angular 17

angular version 17 just got launched and it is amazing it is one of my favorite updates so far to angular let's talk about it so angular version 17 does not just bring a new branding to the table which is this new logo compared to the old one which was this red shield but also the angular's new website which is right now in beta but that's not all it introduced a lot of features which are packed with improvements excitement and whatnot and this is quite related to what we have been hearing about angular Renaissance for quite a while what is that really so this actually started a couple of updates ago when a standalone components actually came into being but I think it actually started when IV engine was shipped and was marked as stable because that was the updated view engine for angular that allowed us to do crazy stuff that included a standalone components being the first thing because I remember the community going crazy and asking questions about when will we get rid of the NG modules and we actually did with the Standalone components but the angular Renaissance actually means that the team angular has been able to ship crazy features in a really small span of time every new release was packed with a bunch of improvements and features that always updated and made angular better so I'm going to talk about the version 17 now and I'm going to go with the features from something that I like okay but then to the ones that I really really really like so let's talk about the first one in your components we used to do something like style URLs or Styles which took an array that felt really weird because a lot of components just had one single URL and even though we had one we would just specify an array now we have improved this to actually have one backtick that can include either your style or the URL as well and that makes it more easy to read and also understandable as well the second thing is we have have Standalone components by default now so when you create a new angular application it's going to create an app that has a standalone components by default so you don't really need to care about that but if you want to create an app that has modules then you can still opt for it by specifying this particular flag when you're creating it and then you have an app with NG modules enabled the other amazing thing that I really wanted in angular was serers side rendering and for angular we had to use NG Universal had to use use a lot of configuration but with the new update with v17 it comes bundled with SSR and when you try to install or create a new angular application it asks you if you want that to be enabled by default and with zero config you have a server side rendering enabled application that is really good for SEO as well now coming to the things that I'm really excited about the control flow the new built-in tempate control flow this allows things to do so much nicely remember we used to do things like ngf ng4 and we might have been really comfortable with them but what about NG switch I was also confused always when to use the square brackets notation for NG switch and went to use the asteris for you know NG switch case NG switch default and that was because the convention of those as risk or the structural directive were not something that were really conventional you had to learn them separately apart from what you know about web development now the control flow comes with a syntax which is natural and quite similar to what we use already for example the if block you can see the atate if statement containing a conditional parenthesis where you can Define the condition just like we do in JavaScript and then you can render your component right there one amazing thing that we have now is else but also else if this is something that I've wanted for so long now previously we used to have the NG if and then for else we had to create an NG template and then we had to use the variable blah blah blah but now we have a clearer structure of defining the if else but also the else if condition so we can render components according to our logic and guess what switch cases because I know a lot of senior developers would be like ah who uses the if else if else if else if we usually go with switch in most of the cases but yeah if you have a condition where you have a variable and you want to switch on it having the different cases then we also have the switch casee block which is really cool but what I'm actually excited about is the four the four or the four statement now is pretty close to the JavaScript 4 and it has the track statement mandatory which is what I wanted for so long because we often forgot that we actually need to provide it for angular to be better it when it comes to Performance for lists when we are running an ng4 on certain List It and we used to use the track by function when we actually remembered it but now with the new template control flow when you're using a for block you need to provide the track and the statement is really easy you don't need to create a function you can just specify what property to track right there and then and whenever I used a for statement or an NG for almost always I had to put a condition where I would have to say what happens if the list is empty I wanted to render something like no content available there are no users to display click the plus button to add a new one something like that and the team angular has shipped something that is the empty block and you can use it with the for blog and when the array is empty it automatically works and is magical one more thing to understand is all the template control flow blocks support observables and also pipes so you can use them as you do today the only difference is that you're not using the asteris notation with the old directives that we had before but with the built-in control flow and with that I think the biggest thing is that the development experience for angular has become much more easier but those are not the only blocks available this one is really exciting and I love this one the most this is the Deferred loading or the defer block that we have which allows us to defer the loading of a particular component based on certain actions now the most common one that you might be using is the viewport one so imagine having a really huge application and you only want to load a particular component when it comes into the view or when a container comes into the view and then loading it that would make your applications initial load so fast and then also would dynamically load the component and previously when we had to do it we had to use the view container we also had to embed and you know work with the embedded View and it took a lot of code to actually make that happen but with this one it makes it so much easier and I'm in love with that and the viewport is not the only thing that you can use with the defer block you also have the other options that you can see on your screen as well and some of you might be already thinking that yeah we already had the lazy loading built into the routes automatically but we did not have anything that would allow us to easily configure lazy loading a particular component and now you can have lazy loading a particular component not only on the viewport change but as I said on other interactions as well and this is amazing and if I wanted to list all the things that angular V7 prod it would be too long of a list for example better support for schematics or allowing the utilities to create those we also have the es build now as a bundler as well and we also have vat with es build and this makes everything so fast so I'm going to link the official blog in the description so you can go through that but one thing that I want to mention right now is even though these features are amazing super hyped everybody loves them it's important to know that most of the Ang applications out there are Enterprise applications or applications which might not update to the latest version very soon so it's still good to learn all the concepts that are old angular so to say but you can obviously work on the new one and just like the previous Updates this update version 17 is also backwards compatible so you can still use the ngf ng4 the previous blogs if you're using wheat and you want to upgrade to wheat yes you can but web Peg is also being supported is still so it's important to know that you still need to go through the new angular versus the old angular and also I forgot to mention signals signals are now stable this is also something that would really really boost your application and one thing I wanted to tell I've been waiting for the version 17 release for months now because of one particular reason and that is the angular cookbook second edition yes it's going to come out very very soon because I've updated all the recipes already with the latest updates but I was waiting for the final release to see what more I can add to the book so the readers can use it for a longer period of time now even though some of the features are in developer preview I'm still going to add those so you can use them going forward and we'll have a way somehow to keep you up to date with the later releases as well having said that check out the current version of the angular cookbook on Amazon having a great rating so far in the description you'll find the link and as always coding and let me know in the comments if you want me to talk about something particular in angular I'm going to see you in the next video

Channel: Code with Ahsan

Views: 14,081

Keywords: angular v17, angular 17, angular, standalone components angular, angular standalone, angular standalone components, angular signals, signals angular, whats new in angular, whats new in angular v17

Id: bjU2OBq_ASc

Length: 9min 35sec (575 seconds)

Published: Thu Nov 09 2023