Event Booking App | Angular 18 Project

hello all welcome back to Learning Partner if you are new please do subscribe this is another Channel where you can directly connect with me we have around thousand plus members already who are working we take live coding sessions and everything to just get notified about those session please do join this group and check out this website also where you can find so many project ideas with live version proper flow diagram and apis and documentation and all let's start with the yeah so in this video we are going to create event booking application everyone must have used bookm show till now so if we visit the bookm my show book my show offers like movie booking and their second platform is like they can uh there we can book tickets for the events happening so if I go over here events so you can see currently City I have selected is Mumbai so multiple events whatever the events are happening in the Mumbai I can see that I can open any event I can see what details the timing and everything and I can book it so whatever the flow I have uh shown right now that flow we are going to cover so we will have a landing page so the UI is already created you can get it from the GitHub account so majorly we will have two parts first is the website where events will be visible booking will be done and second is the admin part where event organizer will login they will create the event and they can see the booking received for for their created event but uh this part admin part I'm not going to cover because it is just uh G AP call and you just have to show it now in website part what we have to do first homepage will be there where we have to show all the events so this is the homepage and here we will be showing all the events created by various organizer then event page so if I click on the book now or if I click on this card I will land to this page so this page is responsible to show the dedicated event information and here we will show like what other events let's say we have some particular organizer whoever organized this event we will be able to show what other events are there by this organizer so this is the event page then on click of log book Now button we will show the book uh what we can say book we can ticket the book then before booking we need to make sure like user is logged in or not because without logged in we cannot uh allow the user to book the ticket so registration and the login will be in the model popup so if I click over here so you can see we get this model popup in this model popup currently register and the login both forms are visible but we will just toggle it at a time register or login will be visible then last page we will have a my booking page so in that we will just show the bookings created by you means whatever the logged in user is there we will show the bookings same whatever the flow we have got in the bookm show just like that we will try to cover so now again like I will be using angular rating and API so API are over here in free api. minir project idea.com so you can see many event booking controller is there inside that you will be able to see all the apis which we are going to need make sure when you are running the project make sure you run on the 4209 Port this is the command which you can use and GI up template like whatever the UI I have created either you can create by yourself whatever the UI you fill so or you can use my also now from this the project I will be creating an angular 18 so let me just create the angular 18 project so I have created a angular 18 project so you can also create the Same by using this command NG new then project name so I have given the name as event booking angular 18 after installing I have added in package.json I have added bootstrap and font awesome then again we have to do the npay install and once you install the bootstrap and the font font do you need to add the entries into angular.js like this so this is the initial change I have done now when we create the angular 18 project so from angular 17 we don't have app module so we will get app config and the parent component app component will be there uh for routing we will get app route. TS which is which is uh normally a constant file now how many components we are going to need so if we see the pages like homepage will be there event page so let me just create one by one so homepage we will say nowar the we will need a nowar right so now bar we will keep it over here in the app component but we will get create an extra component home component where we will be showing all the events right so in app holder I will create a folder let's say Pages inside the pages I have to create new folders so open a new terminal NG generate I'm using shortcut G for component C and component so first will be home component which is responsible to show all the events then event this will be responsible to show the particular event data then registration registration and login will be in the model so we don't have to worry about that then booking again in the model purpose so we don't have to worry about that just my booking one more component that will be my booking whenever your component name consists two words so make sure first letter small and second letter should be Capital so we will get an hypon over there this is just a standard we normally follow while working in the industrial project so you can see it will get it will get you the component uh name like this and uh nowar will go over here yeah that's it for now once we need any component again we will create so this is the basic code what we get in app component when we create the project so let's remove that so in our app component we will have router outl but with router Outlet we need the nabar also so let's get the nabar from our HTML template only uh first we will need this CSS so let's copy this CSS now these are the common CSS so common CSS will go into our style do CSS over here so common CSS I have kept it over here now we need the nowar so let's get the nowar so this is my now bar so let's copy nowar will be above the router Outlet so router Outlet is the directive which is responsible to load the activated route let's just save and first we need to run the application so once we create the application we need to run the application also so let's open the new terminal make sure you open the folder properly over here means terminal at should terminal should be at your parent folder now NG Ser hyph ion Port 4209 make sure you run the application on this particular port number only enter so you can see currently application is running on ph 0 9 let me just open new tab 09 so now you can see that nowar is visible over here now in the home component so our nowar is done after that home component first we have to do the uh we have to get the events from our APN then event we need to show it over here so this is the Swagger so over here you can see G all event API is there so if we click on execute so you can see some event this is like already some data is there so we are going to use this API to show the events so this is the API which is responsible to get all the events now we are going to make the API call so before making API call first thing you need to do in angular 18 you need to go to app config and here in the provider section you need to add provide HTTP client then only you will be able to make the API Cod so previously we used to import HTTP client module when we used to have the app module but now we don't have it so in the app app config you need to add this to make the API code let's close it let's close this also now let's go to home component now in home component we have to make the AP so uh in the previous video I have already explained like how do we uh create the service and everything so in app folder I will create a service first so I'm just going to create a service folder let's create a service new terminal NG generate service let's say event just a name I'm giving so we use service to create our API call function some reusable utility functions like that to create observable uh to create subject behavior that will be used by other component so we use service for that now in this service we are going to make the APA call so to make the APA call first we have to create the inance of HTTP client so already we have got the Constructor so let's create it over here so private HTTP colon HTTP client like this so we have created instance of that then we have to create the function get all events round bracket curly bracket now from this function we are just going to make the API call and whatever the data we get from the API that we need to return it back so that's why we will need the return state return this do HTTP dot API method is get how do you know that so from over here see post gate so this is our gate API so we have to use gate http.get g method requires only one parameter mandatory one that is URL so now all my apis are going to be having a common URL up till now over here this will be common just the method name is going to change so this common URL we can put it in a global variable so let's create a global variable let's say API URL coland data type string is equal to single code this variable value so in this API URL we have kept our URL what is the common part now here I'm going to use template literal dollar curly bracket this do API URL then we need the method name that is gate allent so this is the method name so this will go over here slash is already there so you just need to add the method name so this function is responsible to make an APA call and whatever the data we get that is supposed to return that so you can see the me return type of this method becomes observable because get method Returns the observable type of data you see over here now our service was get done now now we have to integrate this service into our home component so over here from angular 16 we have got something new that is inject so let's say event service is equal to inject what I'm going to inject event service so event service this so this is nothing but what we you what we used to do to create the instance of our injectable services so previously we used to do like this this is called as a dependency injection this is a new thing we are injecting this service into this component now so on the page load once this home component load we need to call the APM so we will make use of the on init life cycle event on init then we need to implement it and we need to implement the ngon in it also right either we can create the APA call function in the NG but that's not good we should have a separate function for everything for every logic or whatever that function is responsible we should separate out things so for that I'm calling one function get events now from this function I will be making my AP call function right so this dot our event service dot only one function is there that is g all event so let's call it this function doesn't need any parameter so we can subscribe result colon any I will come to any we will create interface for that now if you see the API response you will get object in all my API response you will get an object where three properties will be there message result and data so data is what we concerned about but these three fields are also there so what we need to do we need to create an interface of this three field so let's create interface first so inside app folder I will create one more folder we will name it as model and inside that I will create an interface let's say a event only or model. TS let's skip it simple in this file we will create our models so we can create class or interface okay now here we are going to create interface export interface I API response this is my this is going to be my name curly bracket now what things we are going to have these things so message with data type colon string then result is going to be true means Boolean value Boolean then data is going to be dynamic so here I will keep it as any because sometimes you will get aray sometimes you will get object based on the API it will be dynamic so that's why I will keep it as any so we have created an interface now this interface we have to use instead of any so let's copy this where over here now we need the input also we shouldn't we should not use the interface uh sorry we should not use the any data type why it is giving error okay so now you can see this method is wring object something right so we need to press specify the data type also colon like this let me just this three let's add the input Also let's save now you can see that error is gone because we didn't specify the return type from this event so now we have specified the return type now we can uh access the same now this uh function is going to be responsible to call the aps so this function we need to call on the page load so in NG on init we will call this now whatever the data we get that we need to subscribe it also now what we can do uh we can do the what we can say we can use a sing pipe also just but just to keep the project understandable for everyone I'm just going to do the normal way so whatever the response we can get from this API call we need to hold it also somewhere so here I will create event list colon any sorry now again this API response whatever the data we are going to get that we need to store it so we need to provide the data type also so for that this is the type of data we are going to get so let's create an interface of that and I will use I will use a site we have one site that will get us uh Json to TS so we can use this transform tool we just have to paste our Json it will gu us the interface object of types screen let's copy we have already created a model dots so here only we will put it over here export type interface and I event we just have to remove this even wherever number is there we will replace that with number semicolon it's not mandatory but we should have a semicolon that's it so we have created interface now the data type will be like event is equal to Mt so we just need to import this also because this is going to hold an array of this object correct now over here this do I Event Event list is equal to r dot data in data we are going to get the data correct so let's just add a debugger for the first time always make sure whenever you are writing code for the first time make sure you add the debugger see the flow see everywhere I'm adding the debuger just so that you should understand how it is behaving let's open the network tab oh I forgot one thing we created the component but we didn't create the routes sorry let me just close everything so after creation First Step should be we should be able we should have created the route but we forgot it let's do this now so in app route. TS we have to create the routes now so I angular is a single page application everyone knows but to achieve multiple page based navigation means we are able to navigate from one page to another we have to implement the routing so by default we get this route file here we have to create the routes so first route path I'm keeping it as empty and this will be my re default rout so redirect to let's say home then path match strategy we need with the value full so this is my default route means when my application runs this is the default page what it is going to render then again path now our path will be home and component so if in the URL we have home component which component we have to open obviously home component so you can see UT has been automatically added so if in the URL we don't have anything if it is empty where it is going to redirect home so it will redirect to home and it will load this component let's create the remaining ones path poen second is for event but that two will have a parameter ID component this is a parameter parameter RS Event Event component yes then we have one one more route that is booking so path my hyph booking component my booking so these are the routes we have fine this is default route and all the specific component route after that so as we said home is the default route so if we go to the application somewhere it is breaking property or signature expected on model. TS line number two let's see what's what is wrong over there oh two semicolons were there so now on the page load you can see a call is there first let me just reload again just enable the debugger reload now you can see home component got load see over here so first trigger what we got in the NGIT was the component load NGIT will trigger so n it is there then we are calling this function so it will go to this function now now from this function we are calling gate all event function from this service so now it will go over there see now from here we are actually creating that full URL and then we are making the AP call so API call will be visible over here in the network tab make sure you have this selected so you will be able to see the API call only continue So currently you can see API call is 200 means API we have got the data so now once we get the response you can see this subscribe call executed this is like a call back once API got executed successfully then this subscribe will execute and now in the result you can see we have got the data oh around 91 records are there so apis are free everyone has created this uh their events so that's why you will be able to see so many events now whatever the data we have got in data that we are assigning So currently event list you can see it is zero no records are there now if this line work in the event list you can see 91 records are over here got it now so on the page load we are able to make the AP call we have cached the data into this variable now this data we need to show it over here let's go back to our template so this is the UI so let's get this UI so this is the section let's copy this section this will go into our home compon component HTML let's replace save so now you can see UI is there but this is static UI now we just have to make it Dynamic now so whenever we say we have to make any UI Dynamic so before angular 17 we used to have the ng4 director by which we used to iterate the El but now from angular 17 we have got control po statement so that is nothing by normal for Loop whatever you know but we can use that for Loop in the HTML so this is static Contin removing but you just have to write directly at theate for Loop so this is the syntax of the for Loop for Loop item of your array name so our ARR name is event list so let's get this let's put it over here and this repeat it like whatever the content you have to repeat or rate that should go inside over here so that that much time this element will render so let me just save it now you can see we had around 91 events so all 91 events are there again cards are cards are iterated but value the information is static so let's make it that let's make that also Dynamic now image so let's remove this static image now we have to use the property binding so SRC will go inside the square bracket now we have to provide the value so item dot so now what property you will use image URL right so this is the benefit of doing uh strongly data typing means creating class or interface you get everything intelligence then this will be event name so let's use interpolation item dot event name and book now we will keep it as it is let's save and check so now here you can see whatever the records user has added some are visible some someone has provided the image that are visible over here you see events are coming properly so on the page load event API is done and events are also rendering properly now next thing is once I click on this card or click on book now I need to navigate this from home to my event page so for that instead of this HRA we are going to use router link so now if we have to use the router link from angular 17 the rule goes like whatever you use you need to import that so we need to import the router link also over here router link like this correct so once you import the router link that then you can use it now where you have to navigate so we have to navigate to the event page Event Route so event SL then you need to provide the event ID because this is a parameterized route you need to pass the event like which event you need to open correct so over here let's try to use interpolation item dot event wait why it's not suggesting it should suggest let's add over here should it should imper why it's not importing let's try event ID let's say something is error error is there let's open and check ER is not there let's try to inspect this book button no it has printed some whatever we have added now that same thing it has printed that's why it was not highlighting let's try remove this from over here and second object let's try to add the second object that is event sorry item do event ID let's try that now now if I open it yeah so see now it is looking proper 528 if I inspect this we will get got something else 527 now if I click on book it's not redirecting again we might have even slash did we miss something or this route is not correct slash needed first let's try this now if I click on book yeah so now you can see we are we are successfully navigating so first you need the slash then the colon so make sure you also don't mistake this now so we are whatever the event we click on book now with that we are able to successfully navigate to the event page but in this page we need to get the detail of this particular event and show it over here so for that this is the UI so let's get the UI first from over here then we can close this so this is the section let's copy this is the event page let's paste it over here yeah so UI is coming now this is the static w we just need to make it Dynamic so we have the ID over here now first first askask is we need to read this ID from the URL then we need to make another APA call to get the details of this particular event ID so for that we have one more API let me just check so that is gate event by ID so what was our ID that is 521 let's try to find so this API is having parameter so you need to send it on click of execute so you can see in the data you get a single object so this APA call you need to make so this is the method name now again we need to make the APA call so we have to create a service for IT service now here get event by ID so again we are going to return so this HTTP again G AP call is there template literal we have to use dollar curly bracket this do API URL then we need this okay now here this ID should be dynamic this is static right whatever the ID we get that we need to pass it over here so side a parameter event ID data type colon number and this ID we will pass it over here again dollar curly bracket like this so this function is going to responsible to make the APA call with the event ID now this function we need to call on the event page but before making the AP before making anything like first we need to read the data from that uh URL that is quy parameter so if we have some parameter in the URL now so that we call it as a query parameter or parameter or query param someone will call it as a query param query parameter or parameter okay now so first I will create the instance of activated route to read the query parameter from the router we need to create an instance of activated route so activated route is equal to inject what we need to inject activated route only so this service is going to be responsible to fish the data from the activated route whatever the current route is there we can fish the data from that now so let's create the Constructor now in the Constructor what we will do we will subscribe to the parameters so this do activated route. perams is there and we need to subscribe to the perams Subscribe result youn any just I'm keeping it any because we can get any number of parameters so I will I will not hot code hard code this now over here let's add a debugger let me just show you how this is working now let's open the console now once I reload so see this subscribe got executed and in the result what we have got object ID and the whatever the ID means two read the query parameter from the URL we have to create an instance of activated route and by subscribing to the perms we can read the parameters whatever we have we can have multiple parameters also so that's why we will get the object type of data ID col whatever parameter you create and from where this ID is coming while creating routes we have said id over here parameter name that's why ID so let's uh what we can do is we have got the ID now this ID we need to pass to the API call to get the data so let's create the function call also before first we need to integrate the service also so event service is equal to inject event service let's create the function get event details now here this function will have a parameter because this function we are going to call from here so let's say ID colon number so this dot event service dot get all EV by ID result sorry we need to pass the parameter so whatever the parameter we will get it over here this ID we need to pass it over here because this function needs a parameter see event ID so that we are passing then we need to subscribe to that result colon any now over here so in the first component I have shown you the normal way how we make the API call just the normal way creating a variable and B uh making the API call subscribing to the data and then assigning to back there is one more way and uh appropriate way to do this if you are just going to get the data from API and you are just going to display that in the HTML there is no need to create like this what you can do is you can create a an observable so let's create an observable so let's say event data now we are going to see how do we use the Asing pipe even data dollar whenever make sure whenever you are creating observable add a dollar this is just a standard format what we use in industrial project so just follow that observable why it's not suggesting let's import the rxs first okay so what I have did is I have import the observable then in this variable what will be the data type observable so now it will what type of data we are going to get event single event sorry that was I event now like this now it is saying like it is not initialize so let's initialize this equal to new observable uh event so this is like we have created an observable now my APA call gives the response of object but what we need whatever the data we have got so for that now over here once we get it now we don't need to subscribe it subscribe subscribe thing we are going to do in the HTML but but here what we will do this do event data we will assign it over here so this do event data is equal to this what it is saying again observable okay so even in in the event again we need to add the okay now it is going to behave randomly because here we cannot okay so here we will just first add the map operator so pipe because what why I'm doing this uh my API is going to response my API is going to send the response of three field object but what we need just the data so that's why I'm using the map operator return round bracket item Co API response might sing error let's add it any yeah then it is working and now the return type will be I event so instead of sending the whole object I'm just sending the required event data okay so now whatever the data we get from the API we are filtering that means we are adding the map operator and from the response I'm just sending the data because I don't need that result and everything I just need the single event data now in the event component this is done now this event wait instead of doing this we can remove this and put it over here also that will also work no need of this function and result do ID we can pass it over here so see now what we did we have created an observable and in this observable what we are showing whatever the data we get from this function okay now this event observable again we need to use the sync pipe so we need to import that so over here a sync pipe we need to inut now this observable we can directly subscribe in the HTML so what I will do in uh everywhere wherever we need to show the data we can use the observable but again to do the multiple time busing pipe instead of that what I will do I will create a uh what we can say NG container just a container I'm creating or let's try with thetive directly we need to use a syn pipe as event data we used to do this in NG but I think over here we won't be able to do it h I thought I thought so we are not able to do this let's use ngj so if we have to use NG we have to import common model why I'm doing this I will explain so over here what I can do star NG if is equal to I need to subscribe to this observable so let's copy over here slash sync pipe as event data like this so see we can do it over here so whatever the data we get from this observable we are subscribing and we are storing into this variable now wherever I have to display the data because if I don't do this everywhere I have to use this so instead of that I whatever the data I get I'm storing into this variable now we just need to bind it first image even data wait so even then data dot image URL then remaining things event name let's use the interpolation so by using this we are actually subscribing in the HTML so we don't have to worry about unsubscribe and everything and we are removing the more code from the PS organizer name organizer name is coming yeah it's coming then book Now button is there start time then end time and it then we have location do we have the location yeah we have the location and then event description so let's get the event description event data dot description we don't have the description I think we don't have the description I must have missed it while creating API fine let's just put it description static thing now let's say and check if we are able to get the data so on the page load we we will be able to see the API call see 528 API call is there in why it is in pending okay now we have got the response and see once we get the response that data is also visible over here why this is over here okay which name event name we have to show so see it is properly visible now correct so I forgot the description but I will try to add it so by the time you will be able to see the description and everything what was left event name is there location and everything and so here you can see we are getting time and everything so we just need to show the date proper date so we can use the date pipes so use the date pipe again we need to add it also so date pipe then let's use the date pipe over here date let's provide the format DT Hy y y y y let's copy whatever the format you need to use you can just specify over here so now you can see date is coming properly if I don't need to show the F year just I need the last two digit so what I can do just two * y so you can see here only 24 is there and here 2024 correct this is L this how you format it now in the detail page we need to show the events created by this where is the organizer name m okay why it is coming in so bold M to is there instead of this P let's make it span still it is coming like this okay now we need to show the other events created by this organizer over here so for that we have one more API so that is gate events by organizers so this is the another API we have to pass the organizer ID and whatever the organizer ID is there we can get the what we can say uh events other another multiple events created by this organizer so we need to pass one let me just get the URL so let's create the service call also in event. service just like this over here m now one more extra rxs topic is there by using tap operator so let me just explain that also or let's do the normal way now we need to create another API call so get events by organizer now and for this function we need to pass the URL that will be like this let's copy and this will go over here organizer ID this will go over here KN so again uh here I'm just formatting the data with from while once we get the data we are just sending the data let's try to use the map operator because here in the event component we have we don't have the organizer ID again we need to subscribe to this So to avoid that what we can do we can just write a API call over here let's do the right thing so here what I will do I'm just storing the data also and I'm just going to subscribe to this also so after this this Dot this. event data dot subscribe I'm just subscribing because I need the DAT what do we say event organizer ID I need that's when I'm subscribing now let's create one more API call function or here only we can do like this event data is there just like that we are going to get the events events and this is going to be array of object let's add that now inside this this do events is equal to this do event service dot get all event by organizer and what we need to pass is result do organizer o I'm getting organizer name only I didn't pass the from maybe I should have sent the organizer iding okay so let it be for now so it will be like here once you uh by the time I will be adding the organizer ID also so here you will get the organizer ID that you need to pass then this you can show it over here or let me just change the API so my bad API was returning let me just show you the network tab once again so with this you can see user ID is coming wait sorry organizer ID is there I think we didn't created that in our interface so let's create this inter in the interface now so in the event component we have to pass organizer ID and whatever the events we get that is that will fall under this subscribe uh observable so this we have to bind it over here so this is the call 12 so let's make this Dynamic so at theate let's try for Loop and let's check if we can pass the sync over here yeah so we can pass now this call 12 will go inside this instead of this SRC as hard code one let's provide the dynamic URL that will be item dot image URL and in book on on click of book we can do the same thing whatever we have done in the home just like this router link so that it will open that particular page let's add it over here again we are using router link so we need to import it also router link so let's save and check it now on the page Lo we should be have we should be having two API calls I think service was not saved let's save it again just go to Home tab let's open this one so now here you can see we have got two API calls 528 to get the event and then whatever the user ID was there so sorry organizer ID was around 563 so again one more AP call with organizer ID so we will get the events created by Him so here only one event is there that is the current one only Okay so this is how we have done now next thing is the booking part so for booking we first need to complete the login and the registration process so in the Swagger we have this API so create user so in create user we have two different types of role so because same API is going to be used for customer also and same API is going to be used by organizer also because same EPA which will be using for registration registering as a customer and for as a organ organizer also let me just check how I'm using that API so user API what type of roles I have okay so I'm not passing anything fine [Music] so let me just get the model popup for registration and the login let's copy this and the registration and the login model popup will go into our app component because there we have the now so in app component at the end I will put my model paper let's remove this white size F so login code we have kept now we can close this we don't need it now now what should happen is we have in the same model popup you can see we have two form this is a login form and this is the registration form so we have two form inside the single model popup now on click of login our login form should be visible on click of sign up or sign up sign up form should be visible so we can toggle that so how we can toggle is like it is like this paragraph is there inside parag we cannot have an H2 let's close okay so now in registration form we have a anchor tag to move back to the login and in the login we have a anchor tag to move back to the register so now on click of this in the nowar we have this login button right so if we click on this login button we need to open the model popup so to open the model popup we can write a simple code let's write a click event open popup let's create this function now we will create a view child of this model okay so to create the view child what we can do we can add a hash property let's say model then we have to create a view child so at theate view child and we have to provide the hash property value so that will be model model colon uh this is like HTML template so element rep we will give the data type what is the error we are having so it will be Shing like it has no initializer so let's add an undefined check okay so we have created an view child and this view child is going to be connected with this model popup now on this button click we have to add if this dot model dot native element dot style do display we are just adding a dynamic style to that particular element is equal to block what it is saying let's just add a null check if model is there okay so this function is responsible to open the model popup we are just adding a dynamic style so we can do this like by document. get element by ID and we can select the element add Dynamics but better way to do it by using a view chart and the same method like this we will need it to close it so close model Po and here instead of block it will be none let's just test if we are able to open the model popup so on the button click you can see we are able to open on close it is not closing because we have not called the function yet so over here let's get the close popup function and we will call it over here click close function let's save and check one more time on login you can see it is opening on close it is closing now in the login P you can see both the forms are visible so we will create one variable to just hide and show the or just to toggle that view so let's create a normal variable is login form data type will be Boolean is equal to for false so if login form is visible means in this variable if it is true we will show the login form otherwise we will show the sign up form so at theate if if this variable is true we will put our login P into this and then atate else we will have our signup form let's move this over here and from login here we have a paragraph on click of it we should be to we should be able to toggle the registration form so on click sorry so here we just need to change the is login from variable to false so over here only I'm doing it false and from registration form we need to move back to the login form so over here if you have an already account please click on login so here we just have to make it true so that it will again move back to the login f let just save and let's check it so on click of login now you can see by default we just have a login form but if I click on login over here oh I think anchor tag was there let's just get remove that anchor tag yeah let's save so by default registration form is there if I click on login you can see I'm able to toggle again if I click on register see I'm able to toggle we don't need this close buttons from the bottom so let's get rid of that this we don't need now so first like registration form so let's check it so here you can see we have user ID that is a primary key so these fields we have so name email ID password contact number and the role number so let's check if we have everything yeah so we have it everything over here now on click of register we need to call the API so we are going to make use of the template form obviously this object is there we need to bind it to the form that form value will connected to this object then we will send that object so let's create the interface of this let's go to this side let's paste it let's copy again in model. TS now instead of interface we will create the class why class because this object we are going to bind it to the form so we have to go for the class class name will be user sorry uh we need [Music] semicolon this is a class so it's saying like its properties are not initialized see so we can have a Constructor and in Constructor we can initialize that so using this dot contact number is equal to Mt just like whatever the default value you need you can initialize like that user ID we can initialize with zero because it's a primary key rule we don't need to Showcase in the U so for that we will say customer hard code we are passing okay so we have created a class now this class instance we have to create in our app component so let's create an object so the name will be let's say user only user obj poen instead of any now we are providing the instance of our class import is equal to now it's a class so we can initialize to it like this now so this object we need to bind to our form so again we are going to use template form so we have to add forms module why it's not suggesting let's add the import now import will come from atate angular SL forms then we have to import forms module now we can add it over here now forms model has been imported now we can bind it to our resist form so this is the registration form let's open side by side so everywhere input type email is there let's make it text now we need to bind it I will what I will do I will just write it over here square bracket round bracket NG model is equal to what we need to bind our object so object name is user object dot so what I will do I will just copy paste this first thing we just need to B the remaining thing now so first is like email it will go over here then full name then we have username username is not there now why username is suggesting name full name we have bind then we have contact number this will be contact number then we have password right so the object we have bind now on click of register we need to call our API so button and click event on resistor let's create this function now again we need to make the API call so again we have to go to the service and write the API call function over here now this is the post API if you see so this is the post API so post API function we have to create we just copy like this register user instead of gate it will be post post AP requires two parameter URL and the object object we will get it as a parameter colon user that is from model and here our URL name so that will be create user so let's get it this object we have to pass as a second parameter correct so our API call function is ready now this API call function we need to integrate over here so this dot oh so now again we need to create the instance of our service so event service is equal to inject event service we need to import then over here this do event service dot register user function and we need to pass the object so this dot user object we need to pass and we have to subscribe to that result instead of any it will be a i API response now so in post API you will get object like this and result is the property you need to check if AP call is Success you will get true otherwise you will get false so you just add a check like that so if RS do result is true we will be sure like API call was success and here we will show message like the user registration is success and in Nails we will show the error message whatever we get from the API side that will that we will get it in message field correct so let's just test if API call is success and we are able to register now let me just open the network tab also so that we can see what data is going we are getting console error oh we have the console error like if NG model is used in the form tag so we have to provide the name that's because our form is inside the we are using NG model inside the form tag so now name attribute becomes mandatory so name is equal to we have to provide whatever we have binded over here so let's just quickly bind that always make sure you are checking the console this kind of error you will get it so now you can see if I open we don't have this is these are the error for the images let's try to register let's say admin1 12 at the gmail.com or let's try more generalized search in12 gmail.com just a dummy mobile let's add a D me so that YouTube Don't remove my video let's say searching DDD full name okay this is email address what was it this was first was email then name then contact number I think label was not correct email is correct then this is name then this is contact number let's add a d contact number let's add a password 22 33 now on click of register we need to check so on click of register you see one AP call is there uh so you now you can see we have got some error and in the response you can see result property is false and message we have got contact number already exist so that's what I said you need to add a check for the result property if it is true API call will be success let's change it 2 76 on click of register now you can see registration is Success now if if I show you the API call response now it is true got it so that's why you you should you have to add a check with result property now registration is Success then we need to do the login part let's check the login API so for login API we are able to login by using the number and the password so let's write that so this is the object right so what I will do I won't be creating API uh interface now I will straightforward create over here login obj with any I'm creating just to save the time let's empty this now we need to bind this to our login form let's copy this login form we have to bind it with the login object so login object sorry over here over here first build is like contact number this will be contact number because we are logging it with contact number and the password now on click of login we have to make the API code so let's write a function click on login I'm not covering validation and everything because it's it will be a huge video already it will be around 1 hour or something so again if I cover everything it will be very huge so for login and uh login how do you validate and everything you can just uh refer any of my videos you can clearly understood like how you can do the login and implement it now again we need to create the service so just like register user we will have it just log in user will be the function name and instead of create it will be login here also it will be any because we are not sending the user object now it will be just the copy paste like this so this I will copy instead of register user will will be on login user and instead of user object we have to pass login object login success and once user is login success we need to store the data into local storage or session storage because how a application will know like which user is logged in because while booking we need to pass the user ID also logged in user ID so for that local storage do item I will name the key as event user and while storing the local storage data we have to convert it also so json. stringify and we have to pass R do data and we need to close the model popup also so this function we will call it over over here also we need to call it because once our model popup work is done we need to close it and over here also we have to do it let's save and check if we are able to log in what was the user name let's check the registered user just now we have done let's try it out this is the API responsible to get all the user if you're working on the admin panel now you need to show all the users so this is the API which you will be using so this is my contact number so we need to navigate to login and password was 2233 I haven't added any validation on the API side but on the front end side you can add a required mean length or something pattern or something you can add it let's just try a wrong password now on click off login so login AP is there but it is saying contact number of password is wrong let's try the correct password 22 33 now if I click on login so it says login success and model popup is also getting closed let's check the local storage sorry local storage and event user you can see whatever the user we have created whole data we have got and that is stored in the local storage now here if user is logged in we should not be able to see this login button we should be able to see the logged in username and the log of button so let's write a code for that now in app component we have to create a view variable or this variable is already there so this variable once user is logged in we are getting the data so that data we will store in this variable is equal to r. data like this and this variable we will use it to hide and show that login button so here if condition I will write if user object Dot user ID equal to equal to Z means user is not logged in by default we have because by default we are initializing with zero so we have to show the login button but to else to that if user ID is there means we have successfully logged in and whatever the data we have got that we have stored it over here so user ID will be there so we will first show The what do we say username for showing username we can use let's use the white button and here we will show the logged in username that two we will get it over here we will show the mobile number only contact number and here log of let's create this function on click of log off now we need to remove the local storage data also sorry and we need to undefine reinitialize this variable also so first local storage do remove item what is the key event user this we need to pass so that it will remove the particular key data and we need to reinitialize user object also user object is equal to new user this is how we reinitialize the class let's save and check it again but now there is a catch so see currently we are logged because in the local storage we have the data but still login button is coming because on the page load also we need to check the local storage so let's create the Constructor so in Constructor we will read the local storage data log data is equal to local storage sorry storage. G item what is the key name event user we need to add a null check whenever you are reading the data from the local storage try adding a null check loged data is not equal to null if local storage if in the local storage we we don't have the data we will get null if it is not equal to null while storing the data we have converted into the string so while convert it back we need to convert it again into the Json uh object format so for that this do user object is equal to Json do par method is there and we need to pass this variable let's save and check so now you can see logo button is coming but here something is wrong let's check new high let's remove this let's see let's add a P tag and inside the P tag we we will show the contact number it is not visible let's check empty why empty contact number is there why it's empty let's try to add a null let's try to add a debugger and see what is happening let's reload so here we have it same we are printing it okay Capital small was there now instead of this I will explain why because from API side I get it in the small case this one also won't support let's add the small case one string let's make it optional now we should be able to see it from API side because we are getting it in the small case so now you can see contact number is visible so we are logged in now if I click on log off this should be removed and again we are able to see the login button correct so that login and the registration thing is done now next thing is we just need to complete the booking part so for booking we have to it's a single with multiple let me show you the API that is book event so here you can see this is a single object and inside that we are going to have multiple because we need to specify like who is attending I can book multiple tickets correct so that's why booking members like what are the members who are going to attend so this is going to be multiple so let start with that so let's start with the booking part so let's just try to login with one of the user or before login let me just show you the API we are going to use so this is the book event API so this is the final booking API which we have to use so if you see this is like single with multiple entity because when I'm booking a ticket for a particular event I might uh take some members with also me right so I can specify like who will be attending with me so those number of uh members who are going to attend I need to add it so this is single with multiple uh AA now for this I have created the UI also so on click of book now in model P we will have this kind of a form so here we need to provide the name age identity card card number mobile number on click of add it will add to this and this added multiple members will go into this array and the whole object also right now let's start so in login let me just sorry I closed that project let me open it again now in event Dil event detail component we have to do the booking thing right so in event component so we have a book Now button over here right so here sorry where it is yeah this is the button so on click of this book now first we need to open the model popup so this kind of model popup we need so let's get this UI so in the HTML template I have already created the model popup so let's get that this is the model popup let's copy let's put that into our book event component at the end so our model is there now we just need to open this model popup on the click of that button so let's write the button click so click open model just a random function I'm creating let's create this event now over here again in the last uh uh component also in app component we have done the model po opening by creating the view CH so let's do that let's copy this let's paste it over over here this model name will be same as it is let's just add the import this model name should be added to our model popup by hash property like this correct now over here this dot model dot native element dot style do display CSS we need to add with block value let's add question mark why it is saying like this what do we did over here okay if model is there let's add the check same like that correct just like this we need the close function also so let's copy let's paste instead of open it will be close and instead of block it will be none now this function we need to call on the book Now button but we have called this but while calling see in the book API what we are going to need event ID so event ID we already have in the once we click on book now we already have the event ID over here uh user ID will be logged in user ID booking ID is primary key so we have to send it at zero only number of ticket we will calculate once we add it so that's it we don't need to pass any parameter over here so now let just check if it model popup is opening or not yeah so it is opening now on click of add we need to get the data from this text box and add it to the array so for that let's create an object so object is nothing but these properties we are going to need so let's copy this now I'm not going to create the interface so but as I already explained in the previous you can just do the follow the same members R any curly bracket now Al now inside this booking member ID is a primary key and this is also primary foreign key so we don't need to pass it that will be automatically taken care by the API side now this we need to bind so before binding again we need to make use of the forms module I'm not using reactive form just to reduce the video length time but if you know you can surely use that now we need to bind this object to our form let's get that square bracket from DEET M mod model is equal to double quotes dot see if we bind the variable with any it won't a suggest like what are the properties we have but if you do the same thing with proper your class and interface it will suggest wait why it's not suggesting yeah let's add it everywhere then I will change the build name then age it will go over here then identity card like what type of card you are providing then card number whatever the card you have provided you need to provide the card number of that and the contact number also correct now on click of add we are going to create a function so click add member round bracket let's create this function now so we just need to create the object whatever we are going to pass so let's copy this whole object for now and I will be pasting it over here which will be have booking BJ p and any like this now here you just need to make this as empty okay now this is the object which we are going to send on click of book now so we have a book Now button also over here let's okay before that now so on click of add what we are going to do this object the member of object we are going to push to this object in this property okay so this do booking object dot event booking members dot unshift we will use or let's use push only keep see and what we need to push the members object whatever the form data we get this do member so once we keep on adding the member it is going to be added to this object to this property so we can use this to show that also in the T body so at theate for object sorry booking object dot event booking member this is an array where we are going to have the data and inside that we will have the TR like this and here we just need to display the information using interpolation item dot let me just copy paste here we first we have to show the name whatever the data we are adding age identity card card number and the contact number let's just save and check if it is working so on click off add let's add some dummy data identity card mobile number on click of add so now you can see it is getting added but here will be a problem if I changing again now so you can see it is reflecting over here also it is overriding the data because it will hold a link between the object and the array so we need to break it so to break it you just need to convert it to string new obj is equal to Json do stringify and what will you will pass this do member directly instead of directly pushing the object you are converting it to string again you will convert it to the object by json. par method so you are detaching that object with the array so otherwise whenever you reflect whenever you do change to the object it will reflect in the array also so to avoid that we are just doing this and this this object newly created object you will pass to push let just save and let's check it one more time on click off add so now see if you if I'm changing nothing is happening okay now on click of book now we just need to call our API so let's create the API call function first that will be in the service so that will be post AP so let's copy this book API URL will be what is the URL book event and the object now on click of book Now button we need to call our a call functions so let's create on booking now we just need to prepare the proper object and everything now so over here you can see these are the object we need to send booking ID is the primary key you will send it zero user ID you have to send logged in user ID so how do we get the logged in user ID by checking the local storage because once we log in we are storing the data into the local storage so let's just read that over here or we have already done that over here so let's just copy let's use the Constructor I think we don't have the Constructor or here no we have it so let's just copy this line of code and Constructor we will put it and user object also we will need let's add the user object let's add the import so you can see this this is just I have copy pasted from the app component so we have read the logo storage data converted to again user object and we are storing it over here then event ID already we have it oh event ID we didn't store um so let's store it also because we are going to need the event ID or we can assign it over here booking object so result. ID the parameter event ID so this do booking object sorry booking object dot what we need event ID so event ID is nothing but what we have in the parameter so that is result. ID so see even ID we have got then user ID so over here this dot user booking object do user ID capital is equal to this do user object do user ID whatever the login user ID so see like this we will get it so user ID is in the booking object we have got the user ID event ID also we have got then number of tickets so number of ticket we will get it in this function so this dot booking object booking object DOT number of members number of tickets is nothing but what number of members we have added is equal to in here only this booking do event member because in this array we are adding the number of member so this dot looking object dot this do length L we just need to get the length of it how many records are we have added then we need to make the AP call so this dot event service do book what we need to pass the booking object so this object we will pass it over here then we need to subscribe from braet result colon API response I think it start with i AP response Arrow function and here we can just add an if uh if an else check just like we have done it over here let's copy let's paste it over here booking success message and we will close the model popup function over here let's just add a debugger over here also and over wherever we are assigning the data over here also we have it and over here also let's save and check it now so let's first login because we are not logged in so first we need to login uh the details I will be using this so we have to log in with contact number and the password will be 2233 login success so we are logged in now if I click on book now first we need to reload sorry so you can see currently we are in the Constructor now in the Constructor you can see we are trying to read the data from the local storage we have got the data in user ID we have got oh it's in small case we won't get it otherwise undefined because it is in small case let's just change it instead of assigning it over here let's make it any uh make sure when you are doing like this instead of providing it with the user interface just make it any because from while creating interface we have done that with the capital case but it should be with the small case so let's just do it again so now here you can see in Booking object we have got the user why it is oh again here we have forgot user ID will be there let's save again so now in Booking object we have got the user ID that is logged in user ID then in subscribe so now result 528 whatever the event ID we have event ID also we have got so in the booking ID you can see we have got the event ID and the user ID now we just need to add the member now on click of book now we will be adding just the member let's say Ram 23 select identity proof as AAR card 11112 Pro something validation I didn't added now on click off add RAM is added then add sham 32 p card something mobile number add now on click of add book ticket we will call our function right so let's click on book Nork so now here you can see this function is there now in Booking object we already have the event ID user ID is your number of tickets is nothing but you are going to get the array length so this so see booking ID is primary key that is zero in event booking number we already have the data event ID is there number of tickets is also there and user ID is also there who is booking the ticket let's continue now in result we have got it true s so once it is true means we have booking is successfully created so now our logged in user ID is 590 where it is now we need to check like if booking is already done or not so let's check get bookings by customer ID and for this AP we need to pass the booking uh user ID 590 so you can see we have uh created two number of tickets to like this booking number is autogenerated so now this is the simple gepa call we can show this into our my booking page in this page we have to show it okay we didn't add the navigation let just quickly add it so booking is done now we just need to show the bookings done by us it is we just need to add a router link where we are going to navigate on the my booking so over here we are going to navigate router link is not added I think so let's just add a router link also let's just save and check if it is redirecting yeah so you can see this component is getting open now in this component we have to show the data we get by this API so let's create the service call function in event service this is a gate API so let's get this copy paste it over here this will be my function name and this is the method name we are going to have now instead of 590 it will be whatever the ID we get and this ID we have to pass it over here dollar curly bracket and the ID so our Dynamic ID will be there now we just need to call this function into our my booking component so to display the booking we will simply get the row column structure and in the table we will show it table P body P head PR 3 serial number let me just quickly copy paste what things we are getting event name then start date whatever things we need to show that we can show it booking number we can show just like a ticket number number of tickets we can show now on the page load we need to call the API so comma on init we need to implement on init NG on in it we need to create the instance of our service so event service is equal to inject event service then here we need to call the function get bookings and we are going to get the bookings by logged in ID by user ID now we need to read the logged in data also right so that we have already done it over here so let's just copy that code like this and once we read the data then we will call this function and if it is not null then only we will call so that only if we get the data then only we will be calling the user object and over here this dot event service dot get booking by customer and we need to pass the ID so this dot user object do user ID make sure U is small because while storing the data into local storage we are storing it with the small case that's how we are getting from the API R any I API response whatever the data we will get that we will store it into an array so booking list any store bracket empty let's store it so this booking list is equal to rs. dat and this only array we need to show it in the HTML at theate for Loop let's copy this let's paste it over here instead of the static thing we just need to display whatever the data we are getting item dot okay first is the serial number so index we will be here using it over here with plus one then item Dot event name let me just copy number of tickets looking number start date let's add a pipe to use the pipe also again we need to add the input so date pipe with format DD hyphen mmm hyph y1 let's just save and check if we are able to see the bookings let's add the table class let's save So currently we just had one booking so that is visible let's try to do one more booking let's try to this book this so here only I'm adding one member so on click on book now booking is done now if I go to my booking you can see I have two tickets one for the first show first event with two tickets and for second we have got only one ticket correct so this is how we have completed our booking from landing page where we have shown all the booking on click of book we are landing to the particular event particular event page with the dynamic ID then on click on book now we are booking the ticket and that ticket is getting booked and we can see that ticket in the my booking company now this is the website part same like that we can have a admin part also where event organizer can login and he can create the event and he can see all the bookings received for that particular event that will be part in the admin part I will try to create one more video where I will be covering that okay so that's it with this video thank you all if you are new please please do like and subscribe

Channel: LEARNING PARTNER

Views: 1,211

Keywords: event booking app angular, event booking angular, angular event booking, event booking website angular, angular event booking website, event booking app from scratch angular, event booking app, event booking project, angular 18 project, angular 17 project, angular project, angular project for freshers, angular tutorials for begineers, angular project for beginners, angular project with api, angular project with dot net, angular project with java, angular 18 tutorial, angular

Id: sA4e2TVxEPA

Length: 100min 37sec (6037 seconds)

Published: Fri Jul 12 2024