Angular 16 overview | angular application with standalone template | Let's begin angular 16

and in this video let me provide overview about angular 16. angular released their major version 16 on 23rd May 2023 for every release they will include some new feature and also some performance Improvement so similarly in this angular 16 also we have some major updates so that actually we can discuss later so before that we can discuss what are the basic requirement we need to work for the angular 16. so the first one is we should have the node.js16 or 18. so if you have the lower version you have to download the latest version and install it so just to go to the browser and type like a node.js so here you can see the latest version is 18.16 based on your operating system you have to download and install it okay and the second thing is typescript so angular 16 will run the typescript version 4.9.3 are the latest version of typescript the latest version is 5.13 so similarly sone.js so it will run the version of 0.13 or a later okay so if you are creating the new application so obviously the latest typescript only available so in case if you have the lower version if you are trying to upgrade into higher version that time you have to update these packages also okay and the next thing is we have to upgrade our angular CLI so let me go to my command prompt if you already installed the angular CLI just uninstall and try to install the latest one so basically it will avoid the catchy exception okay it is uninstalled next I am trying to install the latest version so in this command I am not mentioned any version so obviously it will install the latest version okay the installation gets completed now let me execute our NG version command see the angular version is 16.0.4 okay this is the latest version so next we can create our first angular 16 application new and our application name angular 16. so the routing is needed and the CSS okay our application is created so let me open in the vs code so in this folder states are also we don't have any much difference okay so we have this node models and the source so if you're checking this package.json we can see everything in the angular 16 only and this one JSP have the latest one 0.13 and similarly this type script also 5.0.2 okay and if you check in this source side so we have this component then models and routing other things are same only and one more interesting thing so since I am created on sample application with a framework of angular 16 but it is created the normal template Okay so and similarly we can create an angular application with Standalone template so let me do that also NC new angular 16 underscore yes okay so then you have to provide us the standalone see it is asking us do you want a router yes and other things are same only see it is saying Standalone application stretcher is new and not it's supported by many existing NG ad with the community libraries okay the thing is Standalone concept is introduced in angular 14. so now in this angular 16 it is much cheaper okay the application is created we can open in our vs code see the folder switcher so in this outside almost same only node underscore models and in this package.json it's a 16 and rxjs version TS leave soon.js so similarly this typescript also so we can see the difference inside the source okay so here if you noted we are unable to see this app dot model if you checked this component app.com100.ts file see so defaultly we have this Standalone is true and if you need to import any of the model you have to import it here so deep partly we can see this common model and also this router outlet and similarly if you want to include some other models just like a HTTP client model or else any material model B how to import it here itself okay and also we can see one new file that is app.config see here actually we are importing our routes and our routes are defined in app.roads.ts okay so here we can include the routing data so other files and everything is same only okay so now we can review the new features in angular 16. so the first one is rethinking reactivity it is a kind of performance Improvement features and the second one is angular signal this one is very important features okay so that also a kind of initial stage in the upcoming releases they will include lot of features regarding this signals area so I am planning to cover us the separate video okay signals and the next one is rxjs hinder or probability and forth only server set rendering and the fifth one is hydration against and the next one is improved tooling experience for Standalone components pipes and directives as I said the Standalone concept is introduced in angular 14 so now it is much seam road so now we are able to create the Standalone Trimline application also that already we have done and the next one is Advanced developer tooling better unit testing using gist and web test Runner add to complete Imports with the HTML templates so these are the new features in reduced in angular 16 Sim and also we have some deprecated items okay so that actually we can consider while upgrading angular 15 to angular 16 or any lower version of angular 2 angular 16. since I started my material away Series in this angular 15 only so definitely I will create the separate video for upgrading this angular 15 to angular 16. so that time we can discuss about the deprecated items also okay so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 3,846

Keywords: angular 16, angular, how to upgrade angular 16, basic needs for angular 16, create first angular 16 application, how to create angular application, create angular app with standalone template, angular 16 overview, angular 16 introductions, new features in angular 16, angular signals, install node js, how to upgrade angular cli, how to install angular cli, nihira techiees, angular 16 for begginers

Id: vkrkQJizpD4

Length: 7min 19sec (439 seconds)

Published: Wed Jun 07 2023