Angular 17 - standalone template complete overview | all features with example| NGRX CRUD

Hello friends welcome to my channel hereis in this video let me explore Standalone template in angular 17 so this Standalone keyword we already he in angle 14 for Standalone components so that means the component will work independently it does not depend on any of the model okay so the same way angular introduced the Standalone templates it don't have an app model file so instead of that for handling the configuration related activity is we have an app config so up to the angular 16 we worked on the model based templates now in this angular 17 we are moving to the Standalone template so you may have a question whether it's possible to continue the same model based template in this angular 17 yes obviously so when we are creating the project additionally we have to include this no Standalone keyword so then it will create the normal model based template at the same time time we have to learn this Standalone template because we don't know how long they are going to support for this model based template okay as of now it is available and one more thing when we are moving from this model based template to Standalone template we don't have an app model files that I already mentioned so since this model file is removed obviously we will face some challenges in different areas so here I listed out some of the areas basically we will face some challenges and also I have provided the exact phase first we can start from the components in this component finder you we have changes in this routing and lazy loading using one component in another component like a parent child component relationship and then we can see how to use material u in this Standalone template then HTTP request handling and reactive forms HTTP interceptors ngrx finally we can do one redactions in this Standalone template using net Corea and ngrx pattern okay first let me create the application so the command point of view there is no change Eng new and our application name so defaultly it will take the Standalone template only okay but make sure already you have upgraded your angular CLA into angular 17 so we can choose the CSS and then server side rendering as of no we can give no maybe I will cover in the separate video for the server side rendering so the application is created next we can open in this V code okay our application is opened so we can review the folder stretcher so it's almost similar to the model based template only we have a slight difference first we have this note models and then in this Source then this app so up to this is fine only then we have one component is app component but this component is the Standalone template okay and we can see this app config so as I mention instead of the app model we have this app config so in this provider site defaultly registered this routes okay and then we have this routing file here we can Define our routing related things and as usual we have this index and main.ts so in this main.ts in this bootstop application side added this app config okay and other areas are same only like angular angular Json package Json and this TS config everything is same only okay next let me run this application application running in this port of 42 okay so next we can start our changes first in this app component side let me have this router outlet and removing all other things okay I just Saed see the response now completely plain screen so if I'm adding something okay the text is coming so next let me create some components so in this command point of view there is no changes but it will create default as the stand alone component only so if you are scking here see stand alone component so the same way let me create one more component okay the two components are created so next we can include these two components in our routing site so in this array we can include the objects so first I'm registering this home component so next we can include the customer okay now it is fine so now if we are checking we can see this homeworks it is coming from the home component at the same time if I'm providing customer so it is coming as the customer works okay our routing is working fine so next we can include the menu so let me try the same navigation using menu also for doing this one let me create one more component menu header okay the component is created so let me take this selector so in our app component let me add this component as the child component okay so once I'm saved see we are getting the error because this is not the known element of app component so in this case we have to import this uh component in our app component in this import side let me include menu header component okay see now it is working so next in this component let me include two buttons one is for home and another one is for the customer and adding this router link okay just to save see now so design once we installed this material U we can manage so before that we can have the same one see we have a two buttons and I added this router link also so when I'm clicking this home see it is not changed so currently we are in this homepage so when I'm clicking this customer also it is not navigated so the reason is we are used this router link okay but it is the unknown element for this component so we have to import this one so in this TS side this import area let me import this router link so now if I'm trying see it is changed to customer so the navigation is working fine and the next thing is this is lazy loading okay so in our scenario we have used two components one is home component and another one is the customer component in this initial page load this customer component is not needed so when I'm clicking this customer only it's needed so initially if you are checking so in this source side inside this component folder we can see this customer home and menu header from the initial load itself now let me apply the lazy loading for this customer so we can remove this one the top also we can use load component import then so now let me save this one so now if I'm trying to reload this page so in this component side we can see this home and man header only so when I'm clicking this customer it's loaded this customer also okay so this is the way our Lac loading is working so next we can install the material uway because the isign also needed one and material so here also we can use the same command so now the installation in progress okay the available version is 17.0.0 we can continue with yes so theme we can choose this indu ping so next we can choose the theme and typography yes animations yes the installation is completed it's affected our angular Json index Styles and also this app config file so we can see here so in this provider side it's included this provide animation okay so next let me create one common model class so in this Source folder created one folder mod mod and we can create one more folder model and in this model folder we can create one file so here let me import some of the commonly used components models so if it is not coming we have to inut it manually the same way we have to import other models also okay this is fine these are the one time changes only next in our menu header component so in this import side already we have this router link so after that let me include this material model also okay and here so we can use this mat toolbar okay we are getting this error and it is targeting this material model so let me verify okay synex issue okay now it is fine okay we have this menu we can include one icon menu so after that we can move these two buttons here and let me include this m button directive okay so we can save this one and in this text also let me remove see now now our menu is fine so currently we have completed this component and material UA so next we can move on the HTTP client so let me create one service here so let me provide the name is master service so our service also created okay this is our service so here let me inject this HTTP client so in this model based template uh we supposed to import this HTTP client model so here we have to include some provider let me show you so before that let me enable this Json server AP also data okay the AP URL also ready so now we can use this endpoint first okay so in our service side I'm creating one function just a g all okay and provided this endo and we can create one model also we can Define these things okay ID title and this other ID is the integer so we can provide number and then title string so finally author also string so we can use the model here so now I am trying to consume the same service in our component side so let me take this customer only okay so here I'm going to have this Constructor and injecting the service here and also implementing on into hook add than creating one function and declaring one variable here so I'm just formatted and adding this into the console okay that's fine and I'm calling this function it here so up to this is the normal procedure only see we are getting some error that's what the data also it's not loaded null injector error so no provider for HTTP line that is the reason so we have to add the provider in our app config side so let me go to our app config so the provider name is provide HTTP client so let me save this one so now if I'm clicking this customer we are able to get this data okay so now we have completed this HTTP CLI next let me moving on this HTTP interceptors we all know the usage of this HTTP interceptors or it's basically modifying this HTTP request so in my case I'm going to consume One Secured net core web apaa for accessing the API I have to pass this uh jwd token first we can create our Interceptor so the command is en generate interceptor so we can create in the folder of service let me provide the name is token Interceptor see the Interceptor is created for verifying this one so let me include One console and in this model based template uh once we created our Interceptor we have to include in this app model provider section but in this Standalone template in this app config site we already included this provide HTTP client inside that so let me go to our app country so here already we have included this provide HTTP CL so inside there we can include with with the interceptors so here we can pass multiple IND ctors okay so let me include our token Interceptor okay this is fine let me save this one so now see we can see this text so initially I'm in this homepage so when I move this uh customer I'm having one HTTP request see so that's what I'm getting this console message so instead of this uh Json server API uh let me consume this realtime net cor BPA for that I already having one created net cor BPA so here we can take this customer let me execute this one so we are getting this 4 not1 error because this is the secured one we have to pass the authorization token so let me copy this URL and adding in this Postman and in this header side we have to pass our token okay okay so already I have included May BC expired one so let me generate one new token so if you want to know about this bapa just to follow my Net 7 bapa tutorial I will add that video link also in this description okay it is generated the token let me pause it here see it is working now okay the same API only we are going to use in our application just let me copy this APA endpoint URL so in our application first in this service side I'm creating one method get all customer next we can create the model class I mean the model interface here so the properties we can get it from here code name email and phone credit limit we can take the first four Fields that's in enough okay so next in this service side we can include that next in our component side I mean our customer component so instead of this get all we can use the get all customer and I'm changing this data type also for the Declaration okay so the next thing is we have to pass the token so let me go back to our token Interceptor here we can remove this one here let me declare one variable we can provide the name as JWT token we can clone this request using this set header option we can pass the authorization token and our token type then we need to pass our token so in this realtime application once we logged in we will get the token we supposed to store one of the State Management option so for this example let me hard code the token value okay we can pass this one let me format this one at the end we can return this token okay let me generate one new token because the old one may be expired so now let me try this one see we got the complete customer information totally we have eight records it's showing so next what I'm going to do uh we can do the ngrx implementation so before that using this data let me bind in the one of the table the material table so it's not going to take much time I just use don't table so let me save this one M card is the unknown element okay so then in this import side we have to import this material model okay now it's fine so next in our TS side I'm going to declare one more variable so once we have this data let me assign to this data source okay using mat table data source option okay this is fine next we can Define the table headers so the data type is string array we can provide some hard code values so we can use this [Music] code name email and phone number okay next in this HTML side we can include ma table some this data source we can pass the data that's fine and here we can have this table header and table draw okay so the same way for table body we can say this is matro andat row definition The Columns we can use the same display columns okay then using this NG container we can set our th and TD extend this t h marer cell same way for the TD so instead of the header cell we can use this matth cell and in this matth cell definition for the data of binding we can use this one okay so let me save this one okay still the data is not loaded let me verify okay we are getting the error so can't bind the ng4 since it's not a known property of NG container okay so the reason is so since we don't have this app model but if you want to use the common direct use we have to import this common model okay so the same thing applicable for NG and uh NG switch also now let me try see so the datas are loaded fine so if you want to show some difference we can include some Styles here so the data is loaded fine so after that we can apply the sharting and bination the steps are same only maybe I will include in the end of the video so next we can focus on this uh ngrx so let me go to the official site of ngrx first let me install this ngr store so application in the running mode let me stop this one can provide is okay the installation gets completed so in this model based template uh we supposed to import this store model in our app model but in this Standalone template we have to include the provider the provider is Prov store so it will be automatically imported okay if it is not happened we have to do it manually so the same way let me install this EFX also so we can install the latest version that's fine okay this installed successfully for registering our effect also we have to include the provider that is provide effects okay so let me save this one so next we can start the ngrx implementation created one folder store so inside that we can have this this customer so in this customer I'm going to create customer. acction TS so first we can create all the files okay customer. State TS and the next one is for reducer and the fourth one is for fxs and the final one is selector next in our model already we have this customer model so here let me create one more interface so we can provide the name is customer model it's having one list property that is having the collection of customer information and another one is error message this one is just a string okay next in our state so we can define a state customer State okay and the data type is customer model so the list we can give the empt array and in this error message also we can say we can can set as the empty let me format this one next we can create the action so in this action first let me declare some constant variable I'm declaring two more variables okay one is for success and another one is for the failure and we can create the actions first one is load customer using this create action load customer so the same way we can Define two more actions one is for the success and another one is for the failure so in this access scenario having one props and the data type is customer only so the same way for this failure scenario we will get the error messages props so let me save this one so next we can move on the reducer side so in this reducer side first I'm creating one function it's having State and action as the parameter and then top of that we can Define our reducer here we can pass our initial State okay so our initial state is customer state only next I'm just returning it here okay next we can register this reducer in our config section so the object name let me provide customer and the reducer is customer reducer next we can move on the effect side so here export class customer effect and we can use this injectable decorator and then we can have one Constructor so in this Constructor first let me inject the actions that is from our FX library and then our services and the service is Master Services okay so let me format this one and then we can create the indidual effects first one is load customer and then checking the action type if it is load customer using xcast map option and here we can call our services and again I'm using this pipe option and then using this map so in this success scenario load customer success same time in this failed scenario we can dispatch this load customer fail so here look like this map is not imported wa is not allowing this parameter let me verify so the first one is fine for the next two actions we have this props okay end with we have to include something like this okay see now both error also got resolved so next we can work for this load customer access action in our reducer site so we just defend it here first I'm checking using this on keyword on from ngrx store if the a is load customer success here we will get the state and action so here we can return return our actual state so in this list we can set the values from our props and in this error message uh we can set as the empty okay so let me format this one so the same way let me include for the failure scenario also if it is failed then this list should be MTR and we can provide the rror message to here okay just to formatted and one more thing we already completed effects already so that we can include in our app config site so we can register many effects so I added this array our current effect name is customer effects okay this one also fine and the only thing is bending that is our selector just declaring one variable and here we need to provide the registered value that we can get it from our op config so this L name only we can supposed to use and the data type is customer model okay then we can create our actual selector get customer list create selector and here we can pass this featured selector so let me format this one now we have completed our selector also next let me move on our component side in our customer component now we can remove these services so instead of that let me inject the store store from this ngrx store okay so now we are getting error in this load initial data so here first we can dispatch our action that is the load customer okay so next we can get the data from the selector same store do select so inside that we can use the selector get customer list that is our selector so then we are subscribing and other things are same so let me confirm this selector okay now it is fine we can format this one and I'm generating the token once again we can add this token in our Interceptor side okay I'm just refreshing the screen okay application not in the running mode okay the data is loaded so next we can apply the sharting and pation also it's not going to take that much time first in this TS side I'm using this view child and then m page generator so the same way we can include the mat sharting next in this data source Bor equal to the declared Bor so the same way we can include this shorting also so next in our HTML site this table we can include this mshot and in this header we can include this mat sh hter so let me save this one and finally we can include the Bator control here first we can give the page size options we can provide 5 10 and 50 also we can enable this so first and last button okay let me try now see it's loaded our p is also working so if I'm selecting 10 records all are loaded in the single page and our shorting also working fine okay so now we covered most of the areas so in this cred actions we just loaded the data uh the same way we can do the create and update delete actions also and one more think this reactive form also not covered once we are started the ad screen we will cover this reactive forms also so before that one more topic I missed that is the art card so it is also used for the authentication implementation time so let me do that now for the testing purpose let me generate one card we can create this one also under the service folder so the name I provided at card can activate we can use okay it's created okay so this is our art card in this place only we supposed to write our Logics okay and in our service side let me have one function so defaultly I'm just returning true okay so next in our OD card side we can inject the services at the same time let me declare one more variable that is router so this is used for the navigation time here I'm injecting this router and I'm just checking if it is returning true then we can return as true so in this Els scenario we can say false and we can give one alert message and we can redirect to the homepage okay okay now this is fine so the next important thing is we have to use this Art card in our routing site so we can apply for this customer only okay can activate we can use this AR card so let me format this one so now I'm in the homepage once I moved to this customer the data is loaded fine so next in this service I'm changing this value into false so basically this value we will get based on the user login in this real time application for the time being we are just hard coding okay see again we are in this homepage only so when I'm clicking this customer link I'm getting this alert message unauthorized access once I'm clicked okay it is again redirected into our home page so this is the way our art card is working in our Standalone template also so next we can focus on creating one new customer so in this time we will cover our our reactive forms concept first let me create one component and let me provide the name is ADD customer okay and in this service also uh in this card we can provide the default for not here this card also we can provide the default values to because anyway we want to access the pages right so next we can register this add customer also in our routing side so in this app routing I'm just copying this one customer SL add instead of this customer component we can add this add customer okay so this is the way it will work and let me include one button here we can use mat rced button and color primary so here here also we can use this router link then we have to include this router link here so let me click this add customer button okay it is simply redirected okay so we can start from the designing so in this geter we can say this is ADD customer and in this condent side include this we can include this mat form field and then we can include our input control and added this directive mat input okay we are getting some error the reason is we not uted this material model okay see the design now and we can include one static class so with we can provide a 50 percentage okay at the same time let me provide this mat label also so this is for code so the same way let me include three more Fields one is for name is for another one is for email and then phone number and then phone number now it is fine so finally we can include the buttons this MAT card footer so let me include the buttons color primary and also we can include one back button so here also we can use the same matric button and then including this router link just a customer and in this import side we have to include this router link okay the design purpose okay this is fine this is fine and we can remove this text also it's not needed next let me Define our reactive forms first I added this here I'm just injecting this form Builder and then declaring my F so the same way let me include the other controls also name your email and phone number next in our HTML site we can include this form group so in this time we have to import this reactive for models here so now the error got resolved and for the individual controls also we can include this form control name we can include this C submit save customer and instead of the button we can include the angle tag because the button may work as the submit button that's right and let me Define this function as well here I'm just checking whether this form has the valid data if it is yes take the value from our form and assigning into our new object now we can get the value ex this name then email and phone now our data is ready so next we can call over services and pass the exact data since we are using this uh ngrx pattern so we have to work for services and also the ngrx so first let me start from the service a okay so we can use the same Master services and I'm creating one more function so the function is create customer this is the post method and it is having one input object the data type is customer just don't have any return type first we are passing this URL and then passing this object also so the URL we have to change so this is our actual UR so let me format this one so the same way let me create for update know it is put method again this is our URL and here this one is nothing but our code so we can pass like like this and the final one is delete so here the input is code only and the data type is string and the URL so this is our UR okay this is fine and we need to write one more get method for getting the individual customer information get customer by code so the data type is sing code only so it will return the single object and the AP War less we can use this get by code so all the service secured one first the service is ready next we can work for the ngrx so in this store already we created the files so we can start from this actions so in this action uh we can create the actions for this create update and delete so the same way first we can declare this uh constant variables so instead of the load we can say this is for ADD for the update and finally for the delete okay so next we can create the respective actions so the first action is for add customer okay so we can use the constant variables add customer it's having the props we are passing single customer object so next in this add customer success so initially I not provided any props if needed we can include so the same way we can do for this update update customer and update customer success and the final one is for delete I'm just copying this one and instead of the update we can provide delete and changed this type delete customer delete customer success and the the data type is string the name I provided is the code okay so now we are good with our action side so next let me move on the effects so in this effects already we have this load customer here let me create one more effect session for this add customer so this type we are checking as ADD customer and in this service let me call this create customer okay and we have to pass the data that we can get it from the action so once it is completed we can use add customer success So currently we don't have any data also okay so in this failure scenario we have to show some messages that I will handle in the end of the video so initially we can complete the functions okay so next one is for the update here the type is update customer and here also we are passing the same data once it is succeeded I'm just calling this update customer success okay and finally for this delete we can say delete customer add then delete customer success we just completed our effect side okay this is fine next we can work for the alert so let me create one more action so the acttion name is show alert and then using props so in this props uh we can pass the message and then response type so let me save this one add in our effect side so the first one is load customer uh there is no change next in this add customer so currently if it is succeeded uh we are dispatching this add customer success so additionally I'm going to dispatch one more action so what I'm going to do instead of this xcast map I am using this switch map option and here also it is switch map okay after that we can use the have keyword then we can dispatch our action here show alert one this message so we are saying added successfully the second one is response type so here I just provided pass okay next in this failure scenario also we can call the same alert so in this case it is fail and the message is D okay so the same changes we can apply for the other actions also so next in this update customer again here also I'm using the switch map updated successfully and failed to update and this last for our delete customer okay now we are good to go okay this is fine next we can work for this showet action uh for showing this salad I'm going to use the material EV snack bar component so the first thing is we have to import it and in our model also we can include this one next I'm writing one function here so this function having two parameters one is message the data type is string and another one is the response type and the default value we can provide us fail so here let me start the implementation so the first parameter is our message only and the button text defaultly we can provide okay and let me include some of the properties first in this position we can give top the horizontal position let me provide end duration 5 5,000 milliseconds and we can use some classes so let me declare one more variable this is for showing the color okay the Panel class let me provide this class so what we can do based on this response typ we can set the color so in this pass scenario I'm just providing text green this is a custom class we can Define little later and if it is and in the CSS scenario text red okay and we can include these classes in this common style the same way uh let me include this red also now this is fine next in this cfx let me create one more effect for this showing alert okay for the big application we can Define this showet globally so that we can use in the multiple models of type is showet and using this xcast map here we are calling our snake bar function and we can pass the parameter also the message and the response type after it is dismissed if some actions need to be executed means we can do here so otherwise we can have one empty action so let me format this one okay now we are good with our effects next let me move on the component we can dispatch this action from our component so in this add customer component so already have this data next in this Constructor let me inject the store then I'm dispatching the action here add customer okay here I'm just passing this data so let me create on new record 022 once time click with this save so we autom message added successfully so the same way we can work for the edit and delete for doing this edit and delete let me include some button here first in this display columns I'm going to include one more field is called action okay next in this HTML side so it should be actually TD So currently if you are checking uh we are getting this m text so in this case uh actually we have to show our button so what I'm going to do here I'm just checking if the column is not action only we are showing this text okay so otherwise here I'm I'm going to include our buttons and we can include one more button that is for delete see the response now for the space we can manage from the CSS itself okay now it is fine so here first let me start from this delete let me include one function here element. code next to defin this function here code string then I'm just putting one JavaScript confirmation box do you want to remove if it is yes we can dispatch our delete customer action okay okay here we can dispatch our delete action and delete and I'm passing this code once the delete is completed make sure we have to remove the record from our state and also listing so we can do some changes so in this scenario in our delete customer success I'm going to include the props code okay so next in our effects okay now it is fine so after that in our reducer s just copied and checking the action is if it is delete customer success from this state in this list I am applying this filter option okay we just ignored the particular record and then assing this value into our actual State value okay so now let me save this one see now I'm trying to remove this record wins so it's saying do you want remove once I'm click to okay so removed successfully and also the record got removed so if I'm trying to remove this rashmika okay the record got removed mode so that means our delete functionality also working fine so the next thing is we can work for this uh edit for this edit let me include one route just copied this one customer. edit and we can pass one parameter also code and other things are same online next in this listing first I'm binding this function so instead of the delete customer I am providing edit customer next we can Define this function from this function uh we can navigate into our edit page so here let me inject the router Cod so let me try now so let me try now see okay now it is redirected into our edit URL so in this edit also we are using the same components so next what I'm going to do I'm trying to access this value So based on this code uh we can get the individual customer information I'm going I'm going to pop it in this uh controls so after that we can do our update operation okay so that's our plan okay first we can get this value from our component so let me go to our add customer component here let me inject activated route okay next declaring some variables so the first one is edit code so the default value we can provide empty okay and the next one is Page title so default value we can provide add customer and then is code disabled so the default value is false so first we can use this uh page title so initially we just hardcoded so instead of that we can bind this declared variable so next in our TS side so let me implement this NG on in Hook so here we can assign the value for our edit code this do activated route snapshot so here we have to provide the value okay so the value we can get it from our routing side we added a scode I need to convert this one if it is not equal to null then not equal to empty then this is the update scenario okay so otherwise it is our normal add scenario so we can just work for this update so here first I am assigning values into our page title edit customer and then this disabled so let me include true so the default value should be false so after that we can disable this code so I think we can include it directly this. my form controls. code disabled okay so I think this field is not needed so let me save this one see this is the add scenario for this edit it is completely disabled okay and also we can verify this edit code whether we got the exact value so if I'm clicking 0 on Zer see we got the value so the next thing is within how to connect within Services by passing the indivual customer code we can get the indidual customer information so this one also having some changes from our ngrx initially first of all in this ngrx state I'm including one object this is the single object and then in our state so there is an empty object I provided for the missing fields we have have included the default value okay just to save this one and then in our selectors let me create one more selector edit data so in this case we are just returning this edit data okay next in our component side already injected this store here we can subscribe our selector so whatever value is coming I'm going to assign into our form so the first one is [Music] code that is item. code and the name next email and the final one is phone so let me format this one and the next thing is from our store we just added one object in our state so next thing is we have to assign the values into this object okay for doing this one let me write one action here so now let me provide load Cod or else we can give just get customer the same way we can declare these values also I mean the constant variables and while making request also we have dra that is the so that is the code only so the data type is string so let me format this one and next in our effect side we have this load customer so let me copy this one and provide the name as get customer so here I'm just checking the action is get customer and in this service side we have to write one function so already we have this get customer okay already we have included get customer by code that we can use it here get customer by code from this action uh we will get the code I'm just pause it here so once it is succeeded so in this failure scenario maybe so no need to show anything so time being I'm just calling this empt action so next in our reducer side for the initial load time so the object don't have any data okay but we have to provide the default values that let me get it from our state and the failure time no need to worry this delete scenario also not a problem next we can include our section customer success so in this case uh we are not modifying this list and in this uh edit data they are just sending values from our action action. opet okay so that's all about the changes now we can try now I'm trying to edit this record so it is changed into edit customer and also disabled but the data is not coming okay so the reason is we have to dispatch this action that we missed so let me do it from our component side so in this scenario I'm dispatching the action is uh get customer okay okay and we need to pass the props that is your code so the code value already available in this see the data also binded so if I'm clicking some other record it's binded at the same time if I'm clicking this add there is no data if I'm clicking this edit the particular record is loaded okay so now this is fine so the next thing is we have to refer the save so already we have return return the function for creating the record so there we can do some modification for this update so here first I'm checking edit code not equal to null not equal to Mt so then this is the update scenario okay okay else so else as usual our add scenario so in this edit scenario we can dispatch this uh edit customer action I think it is update customer okay so that's fine so let me say this one and there is one doubt I'm having since we are disabled this field whether we are able to access the value by using our normal syntax so so anyway first we can confirm just commanded everything so in this edit scenario see we are getting this undefined so the reason is this code field currently we disabled okay so that's what we are getting something like this so in this case uh so instead of this value we can use this get raw data I mean this get raw value so then we will get the value see so if the field is not disabled then we can go within value otherwise we supposed to use like this so in our case it's not needed so this is one of the option so in our so this is one of the option so otherwise in this edit scenario we already have this code right we can directly assign into the object so then we can have it like this so in this edit scenario only this. edit code so now also it's fine so now I'm trying to change the value rajes do1 and the name we can provide rajeshkumar and completing this phone number so now if I saved update successfully so if I'm going to the list see the fields are updated and this in this amend saved see okay the edit also working fine so now we completed this cred action also so final review so initially we started from this components in this component point of view we did this routing lazy loading using one component in another component so additionally we covered this hard card then we have used the materially way there is no much changes and in this HTTP client we have included the provider and then reactive forms we just imported reactive form models in our component side and in this HTTP interceptors we add the provider and in this ngrx we added providers for the store and effects then we did the complete redactions there is no much changes but anyway we followed the same configuration and the final one is model based templates so I'm just sharing this index okay so previously uh we supposed to use this NG new and project name so now we are trying in this angular 17 so it will defaultly create the Standalone template so since if you want a model based template you have to include this no Standalone keyword okay so then it will create the normal model based templates 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: 10,251

Keywords: Anngular 17 standalone template overview, angular standalone template, ngrx in angular 17 standalone template, app.modules removed in angular, how to create module based template in angular 17, how to use http interceptors in angular 17, guards in angular 17, how to install material UI in angular 17, reactive forms in angular 17, ngFor not working in angular, how to use httpclient in angular 17 standalone template, Angular 17 - standalone templates complete overview

Id: y97NmZeTvhA

Length: 93min 18sec (5598 seconds)

Published: Wed Jan 24 2024