What's New? What changed : Angular9

Angular 9 was released now what does this mean for you and what they mean for you and the angular landscape so let's have a look at the new things angle or 9 brought to us and there is one big the main new feature in angular 9.

Now in case, you don't know what obvious it's their new internal view rendering engine which means it's the logic that brings your angular app to the life you could almost say it's the thing which uses your components or templates and which in the end turns all of that all of the component and template logic.

 You write into instructions that run in the browser when you ship your finished angular application these are the instructions that really change the Dom they're after updated Dom render stuff to the page ends on and therefore the fact that we have a new rendering engine means that it's an under the hood change the API the syntax you work with the way you create angular applications components.

Modules and so on that has all not changed it's still the same as before so everything you learned about angular still is valid and relevant because that is under the hood change still it isn't important under the hood change now what's the cool the thing about this new rendering engine it already offers smaller bundles for most angular apps not necessarily for all but the team is working on making every angular app smaller and especially for very large apps the size improvements can be very significant and over the next months and years of course the angular team continues to work on Ivy and ensure that we get smaller and smaller bundles and therefore less code our users have to download so since the code.

we write hasn't changed it's basically a free win we get here where we magically now get smaller bundles thanks to this new rendering engine smaller bundles, of course, are always great because it means our users have to download less code until our app starts up and also, ivy also is written away that offers an amazing runtime performance so the idea basically is that with this new engine our apps startup fair and once they did startup they also are extremely fast all thanks to ivy another thing that changed with angular 9 are that when you build your app for development so when you run ng serve in your application it will by default use ahead of time compilation and in the past in older angular versions it used just-in-time compilation there now of course technically that should give you the same app.

But because of the way it does compile your code there actually can be some differences or bugs in the content it spits out notice already could lead to some errors being thrown during ahead of time compilation which you wouldn't get during just-in-time compilation but one important new feature that was also held with angular 9 is that you can configure how your templates should be checked so how the types you're using in your templates should be checked some basic support was available in the past too now it's a bit more detailed you can switch between three different modes the basic model the full mode and the strict mode this simply determines how angular will parse your component templates and which things it will check and for which things it will throw errors and dispatch on the official docks indeed is the best way to learn all about the differences generally and probably as no surprise the strict mode is well the strictest mode of all of them which does the most checks and I want to show you where the strict mode differs from the a full mode which already existed in the past now, first of all, let's check that it's not turned on right now in TS config dot JSON or in the TS config app dot JSON which in the end inherits from that master JSON file here you can turn on the template type checks with full template type check set to the true inside of the angular compiler options and this is an option you already could use in the past this will check your templates for a lot of different things and catch a a lot of errors.

for example with this mode already if I go to my app a component template where I have my user property here in the app component if I try to use user dot hobbies here a key which does not exist in my user object there I already get an error if I try to save this it does compile but it also shows me this error in the end so that's some check I already have in place I can for example access user dot H though because we have an H property in that user object now nonetheless this actually should also yield an error why because if we have a look at the user component which I'm using here we see that the name property to which I'm binding actually is of type string and if we take a closer look at the user object we see that the H property there is a a number so I'm actually passing a number into this name property it's not a string now with angular 9 we can go back to that TS config dot JSON file and add a new option here strict templates and set this to true and if we do this it will take this into account let's restart ng surf to make sure it picks up the new configuration and let's see what this gives us now this will now compile the application and it now gives us an error it gives us an error that type the number is not assignable to type string you see at the least of point of time I'm recording this I'm not getting an error in my IDE here because of Visual Studio code and the angular language service which gets used by Visual Studio code does not know about this new set yet but I get an error here in a compiler and it catches this.

an unnecessary error where I'm passing the wrong type of data into this component once I switch this to dot name which refers to this the name which is a string which therefore has two data type I expect here this of the course goes away so after making this change here you see if I restart this to show you that it recompiles without errors it will do so without any errors here it is running the way it should so that's an average tradition added by angular 9 this extra checking mode and if you turn it on you can avoid unnecessary mistakes which might not have necessarily crashed your application in the past but which still might be something you want to look into and you want to fix angular 9 also brought some minor breaking changes in deprecations and for that to learn more the best way really is to go to the official angular 9 update guide which you find on angular io and there you can learn more about the deprecations and changes and I can already tell there is nothing major in thereof course we have Ivy which is not a change where we have to change anything it's just under the hood change typescript version yep that is not too hard and then some deprecations of features which you most likely didn't use anyway so you can safely ignore that no application should be broken because of updating to angular 9 Speaking of that if you have an application you want to update you can simply run ng update at angular CLI at the angular core and fire the point of time you're watching this video - - next is not required anymore because then that next version will already be the current version angular 9 so this is a simple command you can run in the angular project and it will automatically perform all the package updates ends on that are required to update your application now one of the bigger changes we also have with angular 9 and which we actually already had with angular 8 is that when you're using at view the child in your components to select some element from your template and work with it in your component you have to add this extra static option I got an example project here very simple one and there in my new product.

Component I use at view child to get access to one of my inputs simply just to show this change not because there wouldn't be another way there would be with ng-model but here I am using at view child and an angular 8 you already had to add this the second argument to add view child and set static to false in most scenarios now in angular 9 whenever static was set to false you can just get rid of this the argument you're back to the mode we had before an angular 7 and older so we can just use add view child like this there is just one exception if you want to use this element before change detection ran which is typically the case in ng on in it, for example, you have to add static true so static false basically never needs to be added it's the default but static true needs to be added if you access the element you're getting access to the inside of ng on in it so before change detection ran then you need to add this you already needed to do this in angular 8 you still need to do it an angular 9 the difference to angular 8 justice dead in angular 8 you also need to add this for aesthetic false in angular 9 if it's false you can omit it so true always required false can be omitted and this is already it so doesn't really sound like a lot changed does it well IV is a big change even though it's just under the hood and therefore we don't see it but getting smaller bundles in our applications is a huge win since we don't need to change our code to benefit from that and besides when we think about angular 10 and the future of angular, in general, most likely play a major role, of course, the angular team continues to work on IB and the effort will see more and more Assizes improvements and all the runtime.

performance improvements over time which we all get for free because it's the underlying rendering engine so this is a huge change and besides besides bug fixes and other improvements we might also see new API's or new the syntax we can use in angular apps to build our apps that is possible because of IB which does not mean that you have to relearn everything and you will write your angular apps in a totally different way but if some things will get easier overtime for example if you at some point don't need energy modules anymore or something like that then certainly no one would complain so we'll see improvements there will obviously get the size improvements and we might see exciting new features based on IV in angular 10 and beyond so a huge release even though you don't directly see it IVs a huge change really helping us with our applications and we get it for free you don't need to adjust anything