Angular 17 Features With Examples - You Must Know That

as you can see angular 17 was just released this is why in this video you will learn all features of angular 17 that you must know and start using so first of all inside angular 17 we're getting a new logo additionally to that we're getting a new website with all documentation as you can see here I am on angular dodev and this is a brand new website which they really implemented much better than previous documentation I wasn't actually a huge fan of fangula official documentation previously because it was often really dry and difficult for beginners to grasp the concept I already checked quite a lot of docs on the new website and I can say that they are structured and written much better first of all what we're getting here are documentation which actually means here you can find all guides on angular Concepts like for example we're interested in dependency injection here we can get some general understanding but also nice examples and it is really written step by step so you can grasp the concept easier another thing that we're getting on the new website is called tutorials and here you can click on learn angular in browser and the main idea is that you can change the code and learn some things directly in browser by having editor here on the right you're updating code and it is directly being changed on screen here on the right so you're clicking here on the arrow you jumping to components in angular you are getting some documentation like how to write a template or how to add Styles and on the right inside the code you see exactly how it works with the result here also you can access here a console and a terminal which looks quite awesome also here on the left we can click on playground and here we're getting a fullblown angular application inside our browser as you can see there are lots of components here we can write everything in Main s we also have some HTML and CSS and everything that we're changing will be built here on the right we're getting full access to the console and the terminal and we can easily debug what we have the main idea is that you can jump on testing some things inside angular without need to set up a whole project in your local environment and last but not least here is the reference to different stuff inside angular that you might want to use but I really prefer to use search just here and typee what I need for example I'm am interested in signals I'm typing signal and here is the documentation regarding angular signal and how to create them and previously I made a video on angular 16 features and just to remind you there were two features which were in development preview and first and most important feature was signals it was a new concept of the state inside angula and now it is not in development preview anymore it is state table and you can use it inside angular 17 additionally to that inside angular 16 we got here spied which allows to speed up the building of our applications and previously it was also in development preview and now it is there by default inside angular you don't need to change anything and as you can see here in the Builder we're getting a line angular def kit build angular application and this line already uses yes build under the hood but enough talking obviously you want to see how we can set up our new angular 17 application and what features we are getting inside I'm sorry for Interruption but I just wanted to let you know that only 20% of the people who watch my videos are subscribed to the channel if you really want to continue getting videos and support my channel consider subscribing it helps a lot now let's jump back into the video as you can see here in the official git repository we're getting angular of version 17 is 01 and I don't really want to break NG on your machine if you're using angular 15 or 16 for example this is why we can leverage npx to switch to different angular version this is why we can write here npx minus P then angular SL CLI at 17 NG version for example and this command will install the CLI package of angular 17 but it won't break your Global angular CLI if you installed it previously as you can see here we are getting angular 17 and we can directly use it through this command this is why what I want to execute here is NG new minus minus directory Dot and this will create a new project of angular 17 inside my current directory I'm hitting here enter and we're getting a question what name would you like to use for new workspace let's say app after this we're getting what styles shet we want it is CSS and and now we're getting a really nice question that we didn't get previously do you want to enable server side rendering and static side generation as you remember previously ins Side angula by default we didn't get server side rendering but there was an additional possibility through angular Universal to set up angular on the back end now angular decided to make it better we can set up it out of the box and additionally we are not using angular Universal anymore but but we're using a new angular / SSR package which does exactly that and hopefully in a better way here I will hit no because we don't need SSR for our project and as you can see after running npm Run start my project was started most importantly I can really feel that it was built much faster than previous version because now it is leveraging yes built by default exactly with this line inside our configuration in generated project additionally to that angular 17 is generating for us a project which is fully Standalone as in gy modules are optional even in angular 16 now our project is by default without modules this is why here we're getting main TS which uses bootstrap application and it loads not a module but a nap component now inside our app we're getting app component which is just a standalone component which is being rendered on the screen and the additional here we have our app config where we're packing all our providers and configuration which actually means I don't see any sense to use NG modules in new applications and as you can see our starting application also is looking differently now let's look on some new features of angular 17 which is being called control flow the main idea is that they changed how we writing code inside HTML what I'm talking about I want to jump here inside app compon component and I want to remove everything except of router Outlet now here inside our app I want to create a list of users to render this is by here we can create an interface user interface and let's say that we have inside ID which is a stram then name which is also a stram and roll which is a stream and in order to store some data inside our application we can leverage signals from angular 16 this is where here we can create our users and this is a signal and initial value here will be an empty array now here we can provide that this is an array of our user interface now inside I want to pack some data let's provide here a user with ad1 name f and roll developer now I want to do exactly the same but create user two and user three and it will be bar and buz with roll admin and QA so what we want to do now we want to render this list inside HTML and previously we used for that a directive which is called ng4 but we can do it differently now we can write here add four and in round brackets user of users again round brackets because this is a signal then track dollar Index and inside we're rendering our markup for example a div with a user and it will be user.name as you can see in browser the list of users was rendered but most importantly here we didn't create a new div and we didn't write NG G4 Loop here we're using at for and this is a new angular 17 syntax which is called control flow in order to rate Loops inside our markup and what angular team is saying that this new control flow reduces the need in using structural directives which can be unnecessary complex I didn't really see that ng4 is a necessary complex but this is what we're getting now additionally what we can do in our full loop we can provide here one more add and it will be empty and inside we can write some markup for example div we don't have anything as you can see on screen this div was not rended because our list is not empty but if I'm jumping inside our TS file and remove all our records we're getting we don't have anything because our list is empty this is a really nice sugar because we don't need to write additional logic and we're packing together our four and empty construction now what I want to do I want to create a user inside app component so let's create here a user and assign one of the users in our signal for example the last one now let's jump inside HTML and we can write here an if condition and we won't use here NG G but we use here at if operator and we can write okay if user Ro equals developer then we want to render here a if with text developer then we can write else option and here will be user roll equals admin then we want to render inside admin in another case we have one more condition else and here we want to render div with text QA inside as you can see in browser after our list we rendered QA because inside our user we rendered the second element I can jump here and change this for example to zero and now on screen we're getting a developer string so now you know how we're writing for and diff Loop but we're also have a switch and it is working in exactly the same way we're writing here at switch for example for user roll and this is a stream and now inside we can write cases and here will be case for developer in this case we want to render inside developer and then we will have two more cases for admin and for QA as you can see in browser it works in exactly the same way but we used here switch case construction and the last feature that we got to speed up our application a lot is called defer and what defer does it can render your content later or render a placeholder for it if you're loading that which actually means you can skip rendering parts of your application and only show them when some event happens for example we successfully loaded an API call or we hover it on that element or this element appeared on screen this is how we can do that we can write here deferm and inside just do defer as you can see here I'm reloading the page and you can see that all the content does not blink but defer blinks while that because it waits for the whole page to be loaded and only then it starts to load this div additionally to that def markup will be packed in additional file which will be loaded later and will make the initial chunk also smaller and together with the we can use things like loading and here inside a I want to write div with text load in here we can also use placeholder and the last one is Arrow so here let's render an error and inside placeholder will be a div placeholder what we can write inside placeholder is for example minimum 150 milliseconds and inside loading after 150 milliseconds and minimum is 150 milliseconds which actually means when we're loading the page as you can see there was a placeholder for 150 milliseconds and then we see our defer block with the loaded content which actually means we can use placeholder to render some skeleton before your real data lowered and you don't need to build for this some additional diffs you can simply create some views where the content is being loaded later which actually means let's say you have an AP call which is for 1 second first of all there will be a placeholder after this there will be a Lo an indicator if it takes too long and only then after an AP call is there we will render that block with real markup and additionally here is the error if our API call for some reason fails then we will render this block and this is all in the single construction which is quite readable and now several words about triggers of the firm here by default what we're getting inside is on idle so I wrote here on idle and it doesn't do anything this is the default Behavior which actually means this block will be rendered only after the full page will be rendered we don't need to Rite that this is the default Behavior but there are other options and the most popular probably is viewport which actually means we're rendering this element only after it comes to viewport let's check this out I made my console bigger and now defer word is outside of viewport and now here inside elements we can open our body and inside our application you can see that we're getting developer developer but here is our placeholder and nothing is rendered in that block because it is not visible on the screen but if I'm scrolling here and it is in the view you can see that we directly got here defer and this block was loaded which actually means it really helps us to make our applications faster because the blocks outside of the viewport won't be rendered at all and actually if for some reason you missed really important features of angular 16 like for example signals required inputs or other features make sure to check this video also

Channel: Monsterlessons Academy

Views: 35,949

Keywords: angular 17 features with examples

Id: GhNcPbm8w0k

Length: 14min 44sec (884 seconds)

Published: Thu Nov 09 2023