Flight Booking App Angular | Angular 17 Projects | Angular Project

welcome back to Learning Partner so with this video I'm starting a new project the project is already like uh flight booking application so this is the flow diagram like what are the things we are going to do how many roles we are going to have that we will first discuss then I will explain the APL also then we will start with the angular project now so if you see the flow diagram first like app is there like when we say about flight booking so obviously we are going to have an admin panel from where different vendors is going to add their flights according to their schedule and we will have a website also from there we can book the flights just like we will try to cover all the possible scenarios whatever we normally do booking for for a flight from any portal so what things are there that all flows we will try to cover so first we will have an admin panel so admin panel will have two roles first is a super admin let's say super admin is like who will have all the authority who will creates the airport who will add the cities he can see all the flights you can see all the bookings of from all the vendors and everything another role is vendor so vendor is like if we talk about India we have Indigo spice jet Air India so all the vendors all the airlines so vendor will be like Airlines like what are the airlines we have they will have a login also they will log to this admin panel they will create all the file flights according to their schedule from uh this airport to that airport with the specific time they can see all flights created by him right uh then they can see all the bookings received for the flights they have created so these are the things we are going to have in the vendor login or the airline login and this is the super admin so this is admin part then second part will be website now on website normal customer will access that website he will search the flight from the website if your that particular customer is logged in he can book the flight if he's not logged in he can register and then book can book the flight and he can see his all the bookings done by him like what are the bookings we customer did that will be available in the super admin as well as in the vendor login also so this is the normal flow we can expect when we talk about a flight booking application now let's talk about the API so in API let me just search it so apis are uh I mean multiple apis will be there because this is not just a small application it will have some uh good amount of apis so you can see we have City API like uh we can add whatever the cities we have that we can add then vendors like vendor should should be created right then only their login will work so G all vendor API is there add vendor is there login API is there login API will be single it will be used for customer as well as well as super admin as well as vendor so single login API will be there which will be used for all the different role based once we provide the proper credential we will get the user details along with the role like the role is vendor or super admin or the customer then get all customer API is also there register API is also there get airport API is there add update bulk airport with this API we can add the airport this API will be used by super admin because only super admin will have the access to add to create the new airport then get all flight search flight search flight will be used in the website then add update fight this API will be used by the vendor who will create their flights then book ticket this API will be used by the customer when they finally decided like which flight they need to book then get all flight booking this API will be used to get all the flight uh bookings received for the particular fight then get booking by flight ID this is a API if we send a particular flight ID it will get the bookings received for that particular flight then get passenger list by flight ID let's say we need the list of Passenger traveling in that particular flight so this is the API which we are going to need we just need to send the flight ID then we will get the list of Passenger now so this is about we have explained the flow diagram and the apis also which we are going to use now coming back to angular side so empty project I have created now so uh I'm using angular 17 but with the Standalone false means the existing framework uh so this whatever the code I do will be available will be will work same in the older version also now if you want to create a new project you just have to open up folder you need to type NG new and the project name once you do that the basic project will be created now in this project I have added bootstrap.js also sorry bootst and the font because we need the icon and the bootstrap after adding the pack after adding in these packages in the package.json in angular.js we need to register them also so here in the style section I have added bootstrap and the font assome now so in SRC folder app we will have the parent component so once we create the project we get the basic uh uh what do we say UI let's try to run the project first so now to run the project you have to use the command NGS hyip NGS hypon o hypon o hypon o is just to open the default uh browser by default so this is the first time I'm running this so it will take some time let me show you the package doj until then so you can see this is the angular 17 project bootstrap and the font assome just two extra libraries I have added so you can also just install bootstrap and the font assome I don't cover everything in detail in this video because this is Project Specific this video will be helpful if you know the basic concept so there are playlist in my YouTube channel also to get the basic knowledge then you can start now so once the project run you can see the basic code is there so this is coming from App component so let's remove and let's just try hello let's save now you will only see Hello over here correct now let's discuss what are the components we are going to need now if you see the uh flow diagram let's see again and let's discuss like what come components we are going to need first like we will create two major folder admin and website uh the project I will be creating is simple not with the lazy loading so just to separate out the component I'm going to create admin and the website folder now in admin we are going to need a components like flight new flight this component is going to be responsible to create the new f means we will have a form over there then flights compon flights component in this component we will show all the flights information we can search it edit and the delete buttons will there then for all the flights same same component we will use for super admin and the vendor also but if the vendor logged in so he can only see the booking received for his flight for particular his flights only but if the super admin login he can see all the vendors flight we will role based role based how we are going to do that because same component will be used for super admin and the vendor also but according to the rule we will make different a call then uh flights is done create flights is done airport in this component we will do the current operation of airport then City in this component we will do the crowd operation of City also these are the components we are going to need in the admin panel now coming back to website so in website we will have one component that is search page this will be landing page by default then we will have a uh for log for login and the registration we can create a new component also or in a model popup also we can do that because we we are not going to have so much Fields over there so we can do that login and sign up in model popup so we won't need a separate component after that book flight com book flight this component will be necessary to here in this component we will have a form to book the flight then the booking component this same component we will use in the website also to show the bookings done by the particular customer again based on the role we will call another API so these are the various components we are going to need now let's get started let me just close now in app folder I will create a folder like website um before that let's create a Pages folder and in Pages folder we will create website and just like that we will again need one folder that is admin so as discuss we have created two folder now in admin folder I have to create the admin components which we are going to need so now I have to create a new component so NG generate you can write generate or the G also component so I'm just using shortcut so first component we will create again we forgot like we need a login component and a layout component I will just uh I will explain layout component why do we need now so first component we will create is as a login let's start with the login this login component will be used for the admin not for the website in for Website login we will use the model popup only then we will need a layout component layout component as in when we go to the login now we don't need to see we just need to see the proper login login page we don't need need to see the nowar and everything so for that to keep the uh to keep the nowar we are creating one more component that is layout once we go ahead then you will understand why this component is necessary so these are the two extra component we normally need then we just have to create the remaining component so I will just pause it now and I will create so in admin folder you can see I have created all the component that is airport all flights booking City layout login and the new flight now come back to the website so right click on the website open ined integrated terminal now here we will create the components we are going to need for the website so first component that is search so NG generate component search center then we will need book flight only so in website we will have we will have just two component search and book flight so once you create all the components so as as I mention like this is an angular 17 project but I have uh while creation I have added Standalone false so so it is just a normal project it is created so once you create the component all the entries will go into the app folder sorry app module in the Declaration section you can see all are added in over here as we have opened the app module uh let's do the remaining thing so after component creation like we are going to need uh we are going to make the API call so we need sttp client model we are going to create the form using NG model so we need forms model so let's just add that so in import section we need to add forms module and just like that we need to add HTTP client module also so once you select you can see Imports has been added at the top so these are just the initial uh steps you need to do in app model you should have forms model and the HTTP client model if you are going to design forms using reactive forms moduel so you can add reactive forms module uh in this project we will try to uh create reactive and the template both we will try to C so uh what do we say we can cover all the concept also within the project so in the app model we have added our modeles which we are going to need now let's close the app module once we create the component next thing like we have to create the routes so in app routing model. TS let's create the route so this is the basic app routing model. TS Mt now here we have to create the route so first this is a single project right single project will be used for admin and the website also so what should be our landing page means when someone hits our application what should be the default page it should uh that uh should be visible so we will consider app component for now so in app component we will keep our website nowb bar means app component will have a website thing okay so here we will keep our now bar now the first component I will create is for what do we say uh search for the website we will create a search component so path now I'm creating a default route so path will be empty then redirect to redirect to it will be it will redirect to the search page and path my strategy we have to pass with the value full so this is my default route after default route we have to create a path for the search so path search the same name and on search we have to open the component so component will be search component so this is our first route just like that we I will create all the uh again one more like book flight so path colon book Pyon flight and the component I will open is book light now in angular 17 I mean from angular 16 we got let's say you have a tab when we open so open the tab open any component into the browser so we get a tab name right so this is what I'm talking whatever you see over here so just like that I should see particular rout uh tab name so that we can give over here only so that with the title so let's say for search here I will provide the tab title as search light then here I will give the title so if you are using angular 15 or before that so you will have a Title Service you cannot write over here because this came from angular 16 or 15 I think I don't exactly remember but before that we had a Title Service search supplies book new ticket let's give a name like that now these two routes are used for okay one one more component we are going to need that is bookings so path bookings and component uh for booking let's create one more because the structure is going to change in the website so for c for for showing customer booking in website folder I'm creating one more component my bookings so this component will be responsible to show the bookings uh particular logged in customer has done now so bookings the component will be my bookings so in website we are going to have these three what do we say routes bookings now when it comes to the admin path so in admin path we have a login page so now here once we navigate to the login page we should not see the nowbar and everything once we do the login then it should land it will land to the another component where it will it can see nowbar and everything admin panel admin template so for that we just have to keep do some proper routing so now path will be empty component will be layout component so while creating component I have created extra component that is layout now here all the component sorry after login will be children of this layout component means we are talking about admin only once user logged in then all the component he is going to see that will be part of the layout component because in layout component we will have the now bar for admin panel means just like admin template we will have a sidebar or the tab bar so what are the components we are going to visit after the login those routes will be part of the children of this layout component so here again we need to create the routes so first light airport the component we will open is airport sorry airport this is the first component so in this children we will just create all the component from over here only not from the website because website are the without Lo in only we will be able to access this page so that's why it will be on the global level so path then all lights component fls so just like that I will create the remaining so for now I will just pause so the layout component children you can see all the components which are going to be accessible once we once vendor or the super admin logged in all routes have been created but we need a login page so that will be at the top because login page will be accessible if it if is not if we are not logged in right so that will be over here so login component login component this comma so this should be your component structure so if you are following my video and if you're trying to complete the whole thing don't miss any step you do exactly the same so same output whatever I will get you will also get that is guaranteed but just don't miss any steps if you are new if you miss anything then you will stuck with an error and you won't get anything like why what is going wrong right so just follow all the steps so till now after project creation we have created components and we have created the router also now next thing is after component creation we have to start with the uh actual work like all all the API integration and everything so first we will complete the admin part because once we have created flights and cities and Airport then only on the website we will be able to show the data so first we will complete the admin part then we will start with the website now so first the basic Crow operation where airport and the city we will do so let's get started so first comp we will complete is like uh the C operation of city so we just have two apas uh Delete I have not enabled it because once you delete the I mean so the aps are anyone can use it so it gets deleted someone try to delete then whole application won't work so that's why delete is not there but so this API is there that is ADD update bulk bulk City so this API is there which all allows you to add multiple City at a single go so here you can see the object you need to send with the object means the data you need to send is an array so here you can send multiple cities in one go and all the cities will be inserted same this API will be upd helpful for update and the delete also and G All City to load all the cities available so with this two apis we will do the crow operation of our city so let's start now so this is our city component now this is like a bolt update so we can use inline update inline editing in the table so we can send whole table data in one go to update all the cities so first now uh like uh I can go in detail like we can create service and everything but for now I'm keeping uh APA calls into my component only so to make APA call we have already added forms uh TTP client model into my app moduel so here first like what are the service call we are going to need that we will create so Constructor round bracket private HTTP client let's add the import for HTTP client it is not suggesting let me just add it angular slash common slash HTTP then HTTP client will be over here why it is still giving error HTTP client is declared but not us okay now so first APA call we will make is to get all the cities so get all City function this do http sorry HTTP colon HTTP client so this do HTTP do GPA call so for G AP call we need to pass the URL so now the URL I will be using is let me just go back gate All City this is the API which I'm going to use so let's just write out execute so this is my API so I will just copy it and I have to past it over here so this is the API which will allow us to get all the cities currently we have created so we need to subscribe it now here we are going to get the data so that data also we need to store it so City list variable I'm cre creating obviously it is going to be ar of object so I'm making as any I'm not going to create interface and class in other projects I have already done that so you can create class or interface and then instead of any you can use it so City list whatever the data you get that you are going to store into this variable so City list is equal to rs. data so if you see my API response so you get the object and in data property you have the actual data so likewise result. data I'm storing now on the page load when need to make the API call so we need to implement On in It life cycle hooks so on City component implements on in it and once you do on in it you need to add the NG on init function as well and in this function we will call G All City function like that so once page load we will have the data into this component now we can display the data into our table so here I'm creating just a bootst row call grid structure and here table will be there let's add bootstrap class table table hypen bordered now in table we are going to have a t head which will be for storing our headings TR and th first like serial number I will keep it then we don't have that much properties in the city table just city name is there and so T head is done then we have t body and T body again we will have TR and here we will have TD now so TR we are going to iterate so at theate ng4 s star ng4 let city of our array variable name so our array variable name is City list so this will go over here first we will display the data now we need to we need to have the serial number also so let Sr is equal to index and here Sr + 1 because indexing will start from the zero so we are just adding it and here we need to display the city name so City dot let's see the response so City Name ID we normally don't show because that is a primary key and it should be kept hidden so let's just save C if we are able to access let me just check why city is not accessible city is there let's check if we have any error okay sorry in app component we had not added router Outlet so let me just add router Outlet over it so make sure you also add the app inapp component router Outlet is over there so then we need City still layout is there because now let me just add because the city component is a child of layout so in layout also again we will need our router Outlet I in ler component we are going to have the nowbar and everything so for now before adding the now now bar and everything I'm just trying to complete the basic component so that's why I'm adding router Outlet save now you can see on the page load we have got one API call and whatever the response we get from that API that we have displayed into into the table now so now we need to do the inline editing so once we get the data in the city list once we get the data we need to add one more flag into that array now so using I'm using for each Loop and in for each loop I will use for each on the city list and I'm adding one element one property that is is edit and with by default called false property like this so on the page load we get the data in the and we are storing the data into the city list on and using using for Loop I'm adding one more property into each object that is is edit false now we have to add the inline editing so inline editing as in this instead of directly displaying this this should be visible into my text box so input type type will be text and value instead of value now we have to bind the data using NG model so NG model you need to bind city. City n like this and we will add a placeholder also enter city name like this so let's just save and check I think we won't need this so let's remove that so you can see whatever the data we are getting that is visible in the table now we need a add button over here once we click add a new empty row will be added over here so let's add a add button Above This row let me just create one more row so I'm just copy pasting this we need a button let's create a button add new let's align it to the right side text and let's format it now on click of add new what we are going to do we are going to push an empty object into our array so click event add new function so let's create this function now in add new what we are actually going to do in this city list we are going to add an empty object so this do City list do unshift I'm using unshift because we need to push element at the top and the object will be rather than creating it over here so let's create constant obj equal to curly bracket now the properties we are going to need are nothing but the properties we know City ID but City ID will be initialized with zero and city name that again with empty so we are just pushing empty object so object is created now this object we need to push it over here so let's just save and check it so on click of add see empty row is ADD over here right now we will keep adding it but we need to make the save API call also so we will need one more button before after add new We'll add one more button that will be bulk update so let's add it bulk update now we will need another APA call which will actually save and update the data so that will be let's say bulk update dat City function curly bracket now here we are going to make an HTTP post API call so HTTP do Post API call is going to be there for post API we normally need two parameter URL and the object so URL up till this now it will be constant just the actual API end point name will change so let's get that so this is my actual AP end point so this will we will go over here let me just copy we'll go over here now to this we need to send the whole of array so array is like what we need to send this API accept only array so we are sending the whole array let's subscribe R any now if you see the response response you will get this kind of so result is the property which will make sure like the data is successfully inserted or not so this this additional check you can add with an if statement so if rs. result if it is true we can show the alert like CT bulk update success and in error we can show the error so Alert in the message property you get the alert whatever the message you get from the API side that you will get into the message property now once we do the update right we don't need to make the API call because data is already there so this function we need to call on this button click so let's just save and check now we should be able to add update the data on the page load we got the API call and we have just h four record now let's try to add one new record let's name it zala or let's make it tan we don't have airport in t but just for ctm adding now if I say bulk update see one API call is success and data is also there even if I refresh now you will get to see tan it will move at the end because the latest oldest record is coming at the top but what about update so instead of nakur Let's Make It napur 2 instead of Pune let's make it 2 three this will be updated because the whole object we are sending for the update see even after refreshing we are getting the same data let's make it original one bulk update so with just two API we have done adding also updating also and the list delete I have not enabled it so delete won't be needed over here so City component is completed just like City we are going to complete airport also because if you see the airport API that is also with the bulk update see here also it is a bulk update so let's just start on that so after completing the airport thing we have to start working on the creating flights so all flight is the component where we are going to show all the flights created till now so let's check the APF for that I might have some data already created let's just check that try out execute yes so you can see currently I just had one flight so in this component first we are going to show all the flights created by uh currently we have not implement the role based login but let's consider we are logged in with the super admin so we should be able to see uh what do we say the flights created by all the airline because I'm a super admin so I should see the data of all the super Airlines whatever the flights they have creaded I will be able to see all everything everything so for super admin this is the API I will add one more API which we will use in the airline login where we have to pass the logged in Vendor ID also now so in this component let me just close everything so now we are talking about the all flights component so in this component first like we have to get all the uh flights from the API we have to show that into the card or the table layout then on click of add button we will redirect to the new flight so first let's create the structure VA 12 I will have button over here hope screen is visible so BTN hypon primary let's say add new let's add it to the text end now this is the button we are going to have where we will redirect to the next page now before after that we will have row do call 12 and in that we will have table now for airport and the city the API were bulk update but for flight it is the normal AP basic C crud how we used to do that we are doing like that so table let's add let me just copy so that we don't waste time this is same structure we are going to need it over here also now so let's see what data we get in the flight so we are getting uh like flight ID is the primary Kee so we don't need to send that flight number so or before that first we will display like who is the vendor so vendor name like Indigo spy J whatever the uh Airline name is so instead of that let's show the airline then we have to show their logo also so logo is coming over here logo we will show in the TD only we won't have a separate column then flight number for each flight there will be a specific number so that we will identify like what is the flight and uh by its number then we will have Airport arrival airport name I mean from origin City then departure airport name just like from and to Aral airport just like that departure also then we need need the date of travel so travel date when this flight is scheduled travel date price like what price they have decided then we are going to need action button there we will have edit and the delete so it will be now these are the various columns I'm going to have now on the component we have to get uh we have to get all the flight so we have already created a service right so there we will create an API call function so just like this get all city we will need get all flights now this you can see in every function this URL is going is getting repeated so either you can create an environment folder or you can create a uh variable over here and put that over here right so this thing like creating environment and everything I have already covered in the previous project so you can just refer that but this project was very uh I mean so many functionality was there so that's why I'm skipping all those thing now this is a URL so let's copy let's paste it over here now this function we have to call in to our dots so first we need to create the API call service so Master private Master colon Master service now on pay Lo we are going to make the AP also obviously we are going to need on in it let's implement it also NG on in it we will need one more function load lights now so here we are going to make that apal so thism dog all flights this is the function we are going to integrate do subscribe whatever the response we get that we need to store it somewhere so I'm creating VAR a light list to any again I'm repeating you can create interface or class instead of any r. data now this function we have to call on the page load so here we will call it and now we have to use this variable to iterate the TR so in t body we have to write Dr and on this star ng4 let item of flight list and whatever the number of th we have decided that number of TD we are going to need it over here also so serial number we are going to need so obviously let Sr is equal to index and Sr we will print it over here Sr + one because it will start from the zero TD here we will display item dot so now this is the common thing we will have so I will just copy paste now first like what are the things we have said in the th that we need to get so Airline means vendor name before this only I will display the image also SRC will be in the property binding whatever the image URL we get that we will display it over here item dot vendor logo URL and let's add style width let's say 50px and height also same let's add border radius also so that R Circle will be there 50% after vendor name we have to show the flight number so this is the flight number variable this will go over here then arrival airport name so arrival airport name then we have departure airport name then we have travel date so travel date now travel date you can uh see date time is also coming so we will just add a date pipe sorry travel date then we have to add a date pipe so date with DD mmm hypen YY this is just the format I'm passing and the last one is like price arrival time also we have to show but let just complete it for now and in the action let keep it as an empty let just save save all and let's check if we are able to see the fls yes so here you can see we are able to see the fights but why this logo is not in the wrong right now on click of add new we have to navigate to the new flight so that we will be able to create the new flight so on click up over here add new so we will use router link and we have we have to navigate to the new flight route let's get that route so this is the route on click of add we will navigate so let's just test if we are able to navigate so if we click you can see we are able to navigate so now here we have to design the form so let's check the API like what properties we have where do we have ADD or update bulb like oh my God this is also bu update AP only but we will we will pass only one object at a time now so what are the what are the things we have flight ID is my primary key flight number we have to show departure airport ID or Airport drop down we have to show time we will enter arrival airport ID again the airport drop down we will show time we have to enter price total SES flight vendor ID will be logged in like what whatever the user is logged in whatever the airline we have logged in that that we need to rece that we need to read from the local storage and that we have to display it over here but before that if you see we are logged in but we have not shown our what do we say logged in username or the log of button over here so let's complete that first this should have been completed when we implemented login but we missed that let's complete it now so in the layout component we have the nowbar just like over here so now here we need to show logged in username and the log of button at the end so let me just get that code so this thing you need to add at after the DU this also I have copied from over here only example was there on the bootstap side now here instead of search we will first display the logged in username so here let's get the label and inside the label we will show the logged in username so now logged in user when we did the login we have stored the logged in user data into local storage so this was the key so now we just need to read it we need to read the local storage data and that we will display on the label so Constructor I'm creating now in Constructor I will read the data so first I will create a variable loged user data R any now in Constructor we need to read the local storage data so constant local data is equal to local storage dog item while reading the data from the local storage we need to use the gate item method we need to pass the key but once you read the local storage data now before uh accessing it you need to add a null check like if data is there is there or not properly so if local data not equal to not equal equ Al to null then only we will assign the data now one more thing when storing the data into local storage we have converted data into string format now in the local storage we have the data into string format but if you are assigning it to variable so we need to again convert it back to the object format so this do loged in user data is equal to Json sorry Json dot pars method unit to so parse method will convert uh string data into object form means obviously meaning if it is string we have the object form data so this you need to pass it over here right now in this variable we will have the data so let's just print that uh we just need to add an uh null check because at the initial we don't have anything or here so it might break so that's why I'm adding question mark dot then let's check the local storage page in which property we get the username or email ID something we will get so in application local storage light user so we can show email and here we will have log of button and on click of log of we are going to remove the local storage data and again we will redirect to the login page so click log off let's create this function as well so again I'm repeating I should have completed this in when we implemented login but we forgot so I'm I'm clearing it right now so now we need to remove the data from the local storage so remove item is the method we have to use and the key the same key where we have stored flight user and after we remove we need to navigate to the login page also so from TS we have to navigate so obviously we have to create the service of router Outlet sorry router Router now once we remove this. router. navigate by URL we need to pass login so once user click on log off we will remove the local storage data and we are redirecting to the login page so let's just save so you can see whatever the user is logged in the username is available over here now if I click now you can see over here currently in the local storage we have the flight user data but if I click on log off you can see that got removed and we have navigated successfully to the layout uh I mean login page right so let me just login again what was the detail let me just check the detail let me just get me the login datal I forgot like what was the vendor detail this is the database mini project light light users yes so this was the email ID let's copy and the password is 112211 login yes so we are logged in now from all flights when we navigate to the add new we have to design a form now so this component is solely responsible to create new flight only so let's just close this let's close this let's close this now in new flight component we have to design the form so again let's check the object what do we need add update bulk flight so if you see this is a bulk update API but we are designing a form in a single way only means just the normal Standalone form but while sending we need to send this in format in format of the array so I will explain like how do we do that but what things we are going to need in the form so these are the various things we are going to need so let's just try to design the form so first row call well let's show The Heading like inish for new light form after that let's create a container let's move this into container as well and after this so this is the form I have created for the new flight registration so this is very simple form I have created using bootstrap for things only so we have a flight number then schedule date uh like on which on for which particular date this flight is going to be scheduled departure time arrival time departure airport depart arrival airport total seat how many seats are going to be there and the ticket price the initial ticket price now so if you see here we have departure airport and the Airport arrival airport so here we need to uh add the drop we get from the all airport AP let me just show you the HTML form also you can see simply row column structure I have created with textbox then total seats travel date only we need to make it date so that we get the calendar so this is my form now in over here we need to call gate all airport so that we can bind the data we get from the airport to both of that drop down so again in the service we already had created the API to get all airport now we just need to create the service function over here so let's create Constructor private Master my service name Master service now on the page load we need to do that so obviously we need to all Implement on in it so this is just a repetitive thing we need to again do it in every component NG on in it just like that we will need one function load airport so this do master dot what uh we need or airport so get all airport is the API which this is the function which will make that API call subscribe result colon any now whatever the data we get from that particular API we need to store it also so let's create a variable to store it airport list again this project I'm keeping it for very simple so that freshers are also able to understand that's why I'm not using a sync and everything keeping it very straightforward and simple but if you know like how do you use a sing pipe you should definitely implement it so let's go it like that now whatever the data we get that we need to store it this variable so rs. data now we need to call this on the page load now in this variable we are going to get the airport Leist now we just need to make our dropdowns option Dynamic so this is the drop down so here we need to create option and over here we are going to create for Loop so star ng4 let item of airport and the value will be property binding so item dot let's check the proper response get all airport so airport I is my primary key so this I will bind to the value but while displaying I need to display airport name so item dot airport name and the city also I will display so that if someone doesn't understand by the airport name but after that comma I will display the city name also so item dot city name because in the gall airport we are getting Gall airport API we are getting the airport name plus city name also like this so same option we have to just copy paste and paste past it over here because both both the drop down will have the same number of airport let's just save and check if we are able to see the options of the airport sorry just let me save all so over here you can see options are coming but if you see by default the first option whatever the first option we have that is coming as selected but we don't need that so to avoid this we add an empty option so value will be empty and this will act as a placeholders select airport the empty option we have to add it over here also so that by default first uh option will be selected like this now on on click of create slight we need to call our API so let's see that API so the airport name is uh API name is this that is ADD bulk update uh add update bulk flights so this API again I have created with bulk bulk update I should have created it as a normal but you can just uh create the object like object proper object but while sending is it you can send it in the array format so let's just copy this now we need to convert an object so in new into TS we need to create object so that will be flight obj R any fields we have again I'm creating variables with data type any but you should create class and interface if you know it if you don't need don't know it just watch any of the previous uh project video of mine you can Implement interface and class now so these are the object we have created now we just need to bind this object to our form so flight number so using NG model NG model now here object dot this is going to be common so I will just copy paste first now again I can do a smart thing I will search it and I will replace that with this so that it will save my time right so everywhere it is now replaced now I just need to bind the things uh proper properties so that also I will open it over here so this is flight number then schedule date that is nothing but travel date then we have departure time arrival time arrival time and the departure time I have kept it as a string only normally it could have a Time proper data type but I have kept it as a string so user can can enter whatever according to their necessity then airport so let's add it over here let's add it over here now first departure airport ID we have to bind over here then arrival airport ID we have to bind it over here then total seats so this flag will go over this property will go over here and the price the last one now so if you see the flight vendor ID is remaining this we have to read from the local storage so once we create the object in the Constructor we have to read the local storage data whatever the logged in user data we have got so that we have already done in the layout page I we just copy paste it so this is that reading thing I will paste it over here and in Flight object so we don't need the whole thing so this do flight object dot in Flight vendor ID we need to push Dot vendor ID let's check the network Tab and in which property we get the vendor ID application local storage flight user so vendor ID this vender ID we need to assign it so dot vender ID like this now so we have got everything now on click of save on click of create fly we just need to integrate our API so click is equal to to all save light let's create this function I might be going a little bit fast because so many things we have to cover now in service we have to create one function to add a city so I'm just copy pasting this now here create flight now the APN name we need so let's go over here let's copy this is the method name we have to pass it over here now this instead of airport let's make it lights so that very property uh parameter names are also proper now this function we have to integrate on the button click so thism do add create flight this is the function which we have created do subscribe R bracket R bracket result colon any Arrow function now this for this API we need to send the array of object so here I'm creating local variable constant obj equal to square bracket empty object I'm creating and inside this I will push my first object so object do push and I'm passing the object the whole object that means flight object so I am creating an array and inside that array I'm going to have uh what do we say first only one element and this object I have I now have to pass because this API need array with the object so I have created an empty array and I have pushed that the object into my that array and that array I'm going to pass to my API so here again the if statement RS do result check alert let's say light created success any else we will show the error message we get from the AP only so alert sorry result Dot message so let's just save and check now if we are able to make if we are able to create the flight or not so now on the page load you can see only one API call was there now let's try to create it let's try to create uh fight flight number let's say dl1 2 3 uh departure date will be let's say it is scheduled for 9th departure time let's say 900 p.m. and arrival time will be let's say 12 or 112 p.m. the flight will be originate from Raju Gandhi International Airport Hyderabad you can see we have added the city so now it it look looks more promising that this is the airport name and this is the city and from Hyderabad it is going to originate and it is going to land to the nagpur now one more additional check we have to add it over here on change of the dropdown let's say I have selected departure ideas Hyderabad but again if I select this I should show the error like uh from uh departure and the arrival airport cannot be sent we will do that but let's just take is the uh create flag for no so let's say in this particular plane I have the total seeds as let's say 20 and ticket price now in actual air uh booking system we have a differential what do we say for based on the days it has different ticketing prices there but just to keep the project idea pretty simple I'm going to keep a steady fixed price so let's say ticket price again I don't have business class and everything because that will make project more complex and it will it won't be easy to for fleser to Gras the idea and implement the project so let's say uh 3,000 is the price now on click of create flight yes so flight created success let me show you the object so this is the API now in payload you can see array and inside that we have one object so in the response we have got that flight update success now if we go on the all flights you can see two records are there here also we need to show the city uh because we from he from this reading this we don't know like from which city it is getting uh started so still why it is saying like Raj Gandhi International import Raj Gandhi did we do something wrong let me just check the database we might have done something wrong wrong data because PR and the two is same thing is coming let's see what data we have lights this is the table we have let's check the departure ID airpo no different is there this is the record we have just created departure airport ID is okay in both same means departure and arrival same ID is there why is it let's check this this is departure airport ID and this is arrival inport ID but why it is same let's try to create one more flight add new DL 1134 let's select the day 10 9 a.m. 10 30 a.m. let's select the chhatrapati shii Maharaj terminal and pun Pune International input from Mumbai to Pune let's say total s 12 ticket price 2,000 let's try to analyze what IDs we are sending create flight let's check the object what we are sending so here arrival airport ID is one and departure ID airport ID is four so while sending the data we are sending it correct you can see one and four we are sending so let's go back let's see if we are getting yeah it now it 1132 Pune to chatpati this is coming F but why this got B I think we had that selected purposely now so flight creation is Success so just like that you can add an edit and the delete button so I will just uh show you quickly like how you can do that but I won't explain like how you do the edit and the deleting because same thing I have covered in almost project you can just take a reference of any one and you can complete so here you just need to add a button let's add class BTN BTN primary edit and just like that delete button also will be there are we having delete API yeah delete API is there but I might have disabled deleting it because if I try to if I make it unable everyone will delete it and then data won't be visible on the application properly now MX to so on on click of edit you just need to create a function edit and the delete and you need to part the ID like item. flight ID and for delete also item. flight ID then you can write the API Cod just like the basic crud operation anywhere you might have done just like that you need to do now if you see we have successfully created flights so currently three flights are there I need to delete this one which is having the same let me just reload so this was that let me just delete this flight now let me just add some more record so that when we start on the website we should be able to filter properly so uh I had created two Airlines with that I have created certain number of flights from this to this with different date and with different price now flights are ready airports are also ready City also we have done now we can start on the website part so for website let me just open my templates I have already created one UI for the booking so this is the UI let me just run this page this is already shared in my GitHub or not let me just push it so under YouTube Project template you can find it and you can just get the code so this is the UI what I'm talking so from uh departur airport dep arrival airport travel date and number of travels is the optional field if we click on submit we need to hit API there we need to send the departure ID and the arrival station ID airport ID and you will get the list of planes traveling the from this to this so to implement this we have one more API let me just show you that also search flight so this is the API which we are going to integrate on the search button here we need to send the departure ID arrival ID and the date of travel now let's just go back to the homepage on click off log off so this is the search page what we are going to implement this is the UI what we have to integrate on onto this component so let's just go to our component so the admin part is done now come for the website let's close everything now so in website the search page is what we are talking about so in the search page we have to integrate the UI whatever you are able to see like this so we will have a nowar and this thing so nowar we will keep let's see like where we can keep the nowar because in the app component we have router Outlet right but here we cannot keep the now bar because for login also it will be visible so how we can do that let me just think how we can do just like in the admin also we have created one more component which will act as a parent so just like that let's create a component in the website also and there we will keep our nowar so that nowar won't be repeated in every component in the website NG generate component website Landing let's try to now I'm creating one more component that is website landing and here in this component I will keep my nowbar this is what I'm talking about so let's try that now let's remise the header I'm talking so let's copy the header and let's paste it into this component now routing also we need to modify so just pay attention like previously we had a routing like this only uh layout component was there and all the component for the after login we are part of this layout component now we need to do something like that for the website also so let's create it path empty component is going to be website Landing component and it will have the children's sorry it is going to be array now all the routes which are going to be part of the uh website will move to over here like this so this is going to be our routes now and in here also after the header we will have router Outlet so that activated routee will be visible over here let's save all and let's try to check if we are able to yes so now you can see no but why okay search page let's go back so here you can see we are getting the now bar and the search component is getting loaded so I have not removed this uh I have just copy pasted the raway template I was using so uh if you are using it you can just replace the icon but for now I'm just keeping it as it is now website component part is done routing is also done now in the search page we have to copy paste the UI whatever we have created so this is the section let me just copy this let's paste it over here now I'm going to need the CSS for this also so let me just get the CSS it is in my style so let me just get the whole let's copy the whole let's paste it in the search page and let's remove the style section let's try to format we are having some error let's remove those one error is there okay let's try to save and let's check if we are able to see the same page yes so you can see same UI is visible over here now on this page load here we need to bind the airport drop down so this these things will uh this will be drop down and this will be drop down so we have to call the airport API and we need to bind the data we get from the airport just like we have did in the flight creation so now let's close this now in this search component we have to bind the airport drown right so again whatever we have to do so on init implementation so Implement on init NG On in It Constructor because we have to create the instance of our service so private master master service load airports this.m dog all airports we need to subscribe same thing that's why I'm doing it in a speed just like whatever things we have done in the flight component that thing new flight component that thing only we are doing it over here so we need a variable to hold the data airports this. airports is equal to rs. data and this function we have to call on the page load so on in on in it we will call it like this so here in this drop down we are going to have the airport list so let's just copy the same thing we have created so this is the option we are going to need so let's copy and let's paste it over here let me just go back at the top so instead of this text box now it is going to be a drop down let's remove this inst airport Le the variable name which we have created that is airports it will go over here just like let's copy let's paste it over here let's save and let's check if we are able to see the airports yes so we are able to see let's just add the class that is form select form hypon select let's copy this and let's put it over here also still it is not matching the UI let's see how it was there let me just see the UI so I have just added this CSS and now it is looking like the existing one now so here I can select this and from and to and on travel date we need to select the date and once we click on the submit we need to integrate this API so let's uh before that we need to create uh what we can say uh three variables that we will bind to our uh particular form so or you can create an object then you can B so let's create an let's create an free variable because that is very pretty simple and it is very understandable so uh let's say from airport number let's initialize with zero then after that to airport or you can create departure and the arrival also whatever you feel travel date date let's keep it as M string only other then we have to initialize it now so this variable we have to bind to our respective text box so now again our form is inside the form Tex so we need to add that do we say uh name attribute so name attribute NG model so this is the actual important part in our application where we are searching it from airport and same name will go over here let's copy let's paste it over here to airport and the date travel date now how many number how many members are there number of travel that we are not doing it so but for just UI purpose I'm keeping it like that let me just remove now so on click offs this search or instead of submit it will be search now on click of search we need to call our API so let's click on click event get search flight the function name let's create this function now from this function we have to integrate that API so let's go to service now here we need to create one API so let's this is going to be gate API now let's just first test here then we will get the URL so just I'm passing the dummy data 12 03 let's try to execute now I just need the URL so that we have to create same like that so this is going to be my URL so let's copy let's put it over here now if you you see we have we need three parameter departure airport first like departure airport ID colon number then arrival airport ID because for this a we need to send three parameters so that parameters we are creating and the travel date let's add it as a date string and now we just need to make the URL Dynamic so instead of this one we will concatenate it arrival airport IB let's copy instead of this two we have to add AR arrival airport ID and the last thing we need to pass the date so here either plus and the travel date we need to pass so our APA call function is ready this will be search light now here we need to call that thism do search flight and we need to pass three parameter so this dot what do we say from airport then this dot to airport and the travel date this DOT travel date and we have to subscribe any now whatever the data we get that we will store it into a variable lights list colon any square bracket empty so whatever the data we get that we will store into this variable so flight list is equal to r. data now on click of search we are going to hit this API and whatever the flights we get that we are storing it over here now this variable we just have to integrate on the UI to make the flights look like Dynamic so this D I'm talking about so this UI is coming from the table okay not table just a d structure I think I have created let me just so let's remove the static one and here we will use our for Loop so star ng4 let light of FL data now instead of the static thing so there also we get the flight dot let's try to find properly think logo URL we get let's see get all flights I just need to see the properties we have to bind so logo URL vendor logo URL the vendor name so flight dot vender vendor is nothing but the airline okay just keep in mind I should while creating table I should have created is other Airline but let it be now light dot we have to add the flight number so this is the property and this we have to bind it over here then arrival time departure time so flight dot departure time and the arrival time what is this okay price so here we need to show the price flight dot price so let's just save and let's see if we are able to search the flights so let's just check the network like if we are sending the proper data So currently we don't have flight over here let's try to search from chhatrapati shii Maharaj terminal to Pune on the date let's say on the 9th I have added the record when you are implementing this make sure you add flight before you do this because I have added because right now I'm recording the video so I have created some flights for this particular date but when you are trying to implement make sure sure you go to Swagger you add the flights for that particular date or you can search the same now let's click on search so now you can see our API call success departure airport ID airport ID and the date also we are sending now for from Mumbai to Pune for this particular date only three flights are there two of the spice Jet and one is from the Indigo now let's from a this is from Mumbai to Pune now let's try to make it nagpur and let's click on search no record is there let's try to Hyderabad no record is there let's try to Hyderabad from nakur only one flight is there so this is the actual mechanism what I wanted to explain now like whatever the option we have selected over here that we need to display like you can uh again I mean this from and the two destination this is what I'm talking about you can just make it Dynamic whatever the the city you select that uh City you can show it over here and the two City also now once we click on book now we have to book this ticket so uh the API for book ticket let me show you the API so this is the API for booking the ticket but before booking the ticket we first need to allow customer to login right without login because here we need to send the customer ID so customer first has to log in then only he will be able to book the fight and this is the API for booking the flight flight ID is what we have to send customer ID logged in customer ID booking date like what the travel date is total amount like whatever the price we have then what number of Passenger like how many tickets I'm going to book so those number of uh what do we say my guest traveler list I have to add it so now on click of book we can open the model popup and in the model popup we can do that booking form right because we don't have anything work so on click of book model we will open the model popup and there we will so on click of book now we have to open the model popup and there we will Design the form to add the number of passengers who will be traveling we need a mrap model so let's go to move strap site let's get the model code so this is just my model code what I need let's copy it now in the search component at the end I'm pasting my model code let's remove the unnecessary things now on click of book now I have to open this model P so this is my model ID so book model I'm giving is now on click of book now I have to open that model po so let's write a click event book ticket round bracket now let's create this function now here I'm going to open the model popup based on the ID by selecting that particular du so here I will be write constant model first I have to select that element using document by document but get El by ID get El by ID and I have to pass the ID which I have given so this ID we have to copy and will goes over here and we need to add a null check like if model is not equal to null means it has got that particular element then we we will add the style so model do style do display we have to open it so block CSS we have to add just like that I will need a close function so I'm just copy pasting this and this will be close model and instead of block now it will be none so that model will be hidden now on click of book model we are opening this model po let's just check if model PO is opening on click of book Let's search chhatrapati Shi Maharaj terminal to Ping On the date 9th search right so if I click on B now model popup is opening but it is going over here why is it do we have any CSS let me just find light is going over there no CSS is there let me just find out why it is going over here in my search component. CSS I had the CSS with star so because of that it was going over there so let's go on line number seven let's remove it we don't need this so let's remove it body also we don't need it let's just save it and check it now if we open so you can see model popup is opening proper here now what are the things we are going to need so flight ID is not we already have when we click on the book now we will get the flight ID customer ID is the logged in customer ID booking date we know like what uh on which date that uh I mean uh sorry booking date as in uh on which date we are trying to book this ticket so new date we will pass it total amount we will just calculate now here this is going to be dynamic means multiple guest number guest information I have to flick I am buying the ticket but for how many passengers I'm going to book it so travel name contact number and other number these three Fields going to be there let's design the form so over here I will just create row do call three inside that I will need label name and after name we will need text box so input type text class form typon control let's close it just like that I will just copy paste it name then what do we need contact number and other number contact number and other number just a validation government proof anything after that we will need a button so we not need a label let's just copy this let's put it over here instead of Danger let's make it primary and add button and below this row again we will create one row and there we will have the table on click of add we will keep adding the uh guest list passenger list over there 12 and here I will have table class table now here we are going to have t head we have TR D serial number [Music] name contact number and the other number just like the Tad we are going to need the T body Also let's just design it for now now so we have created three elements so now we have to create the object just like the one above so let me just copy this we will create an object which we will bind to that form so passenger obj R and am now this object we have to bind with the NG model to the respective Tex box so here square bracket round bracket NG model dot let me just copy paste this Prower name always take uh copy the properties from the Swagger only because if you try to copy I mean manually write it you make the spelling mistake then API won't save the properly data and it won't throw the error also so better make sure you copy paste it now on click of add we need to create col function add minger let's create this function non click of add we are going to push this passenger into a another array that will be passenger list that we will send to our API so here this dot now it will be like uh we have to uh break the connection because one variable we are trying to push into the array so it will hold the connection so for that I'm I have to create a local object over here obj is equal [Music] to this dot passenger object but I have to stringify it so Json you also do the same otherwise you will face the error jon. string UI I will explain why I'm doing this but let me just complete it again I will convert new obj is equal to Json I'm just converting the object into string and again I'm converting it back to the object so that I will just disconnect the connection it has with the object and the array and now this do passenger list dot push I will push this new object let's just save and the passenger list array I will iterate on the TR so here star ng4 let item of passenger list TD now how many TR we have just like that we need to add we need the serial number so let Sr is equal to index here we will print the SR number so Sr + one and in next TD we are going to print the data from item so item dot let's just copy paste this two more times now what are the fields we have that we are going to display so traveler name over here then contact number and other number so let's copy that also let's just sa and check if everything is working fine just select name nth search now and click a book now you can see we have got this detail let's start Chan and click off add you can see row uh the particular gue list has been added over here let's try Rahul on ADD so you can see multiple members I can add so these are nothing but the passengers or how many tickets I'm going to book those numbers I have those details I have to add now we have to prepare the data so if we see the object for book ticket this is the object so let's copy now ints we will create the object so booking obj colon any equal to this object now this AR will be empty initially now the booking date will be I have to get the new date so new date then customer ID so customer ID is nothing but the logged in customer ID so we are we are already logged in so that data we need so we done the login or not no I think we have not done the login part first we have to complete the login part yeah so let's just quickly complete the login part now on click of login we need to allow customer to login login and the sign up thing because before booking customer need to login also right so this is the API uh which allows us to log in but before login First customer need to register themselves so this is the API by which customer will be able to register so for registration and the login again I will be creating a model popup but that will be in my website Landing component because here I have the login button so here I will create a model and there we will have a registration popup so I will just copy the model popup code this will be let's say register let's quickly let me just quickly design I will pause it for now so just to save the time I have created the login model so in the login model you can see only email and the password uh input elements are there now this is the second model where I have the whole form whatever the things we need to register so this is register now let's change the model ID register model and this is login model so just like that we need to create the code for the opening the model popup and hiding it so open register again the same code what we have written over here to open the model I will just copy paste it this is the code let's copy let's paste it only just the model ID will change so this is we are talking about register model so this ID will go over here just like open we will need a close also so this is close register and it will be none so just like this we are going to need another functions for the login so open login and this will be close login now we just need the model popup uh ID so this will go over here and over here now on click of register and the do a login we need to open the particular model so now here you just need to write a simple code if user is already logged in we just need to hide the login and show the register so this like once we uh do the login part we are going to store the data into the local storage right but before that let me just do the normal thing then I will show it like how it is going to do let me just remove the H now on click of login we have to open the login popup so open login this is the function we have to do and just like that on click of register I will make the register function now let's just test if we are able to open the both model popup on the property buttons on click of login you can see login button is visible let's close it now on click of register register popup is also visible now so now on click of login the popup is also visible now we just need to create the object and then we have to hit the API so this is the register object let's copy let's create the object like this let's MP string with empty double ques this we have to bind to our registor Fields what are the fields we have so here Square back eight round NG model register object dot so this is going to be common so we just have to copy this and paste it everywhere and the address fi now we just need to bind the things so here name mobile number email City address password just like the registration we are going to need the login object also so let's go to Swagger let's check the login only two fields we have email and the password so let's create that login obj col on any now just like this we have to bind to the login model popup also so let's copy so here we just have to filed so that will we have to B with login object. email with password that's it now we need to write the API call so first let's complete the registration one so on click of this uh we need to add one more button register and it will be let's say success color now on click of this we need to call our save API means register API so click event on Save let's create this function now obviously we need to make the AP call so HTTP client object we have to create so private HTTP colon HTTP client now here now we are we have already created the service so let's create a function into service so I'm just copy pasting it new register just a function name I'm giving let's get the API call so AP call name is register only so instead of this register and the object we have to send now the AP call function is ready now here so this dot Master service sorry Master service object we have to create not the client Master service and here this do master dot register function we have to hit and we need to pass the data so this dot register object we need to send then subscribe here we just need to add that normal check for if it is success or not then we will close it uh first we will display like registration is success and once it is Success then we will close the model P so we to close the model we need to use this function so this and if we have the error we will show error in the else block so alert from the API only we get it that's it so we need to call this function yeah we have already called it so let's just try to register now before that let's check if we have any customer already exist yeah so currently we don't have any let's try to register now that okay so register click let's try Rahul let enter dummy mobile number let's enter Rahul at theate d.com City B1 2 2 3 3 you should add it as input type password but just to keep it visible I have kept it like that only let's check the API call so on click of register I think I have Mis misspelled some class name so that's why color is not visible but let's try and click up register yes so API call is there and it is Success also so whatever the data we have sent that is over there now let's check the API again get all custom if we are able to see the recently created yes so whatever the user we have created that is available over here now so next thing we have to do uh next thing we have to integrate is l login so on the login also we need to write one API call let's copy again I have again I'm repeating this is not a small project so obviously it will take take some time so video length is also like that I hate to create long size videos but anyhow project video will be long as like this I will try I normally try to copy paste whatever I can so just the method name I'm changing so this will be login and the API name is also login I think yes login on so here login now here instead of register we need to use login and the object we have to send is login object and alert also we will show that login success and close login we need to call once user is successfully able to login we need to call this method that is close login so let's just save and check if oh one more thing once we do the login when we need to store the data into the local storage just like we have did in the admin part so local storage. set item let's give the name as flight customer and Jon singy and rs. data so whatever the data we get that we are just converting into the string and storing it to the local storage so let's just save it and let's check the login part now so what was the detail what we entered so this was the email and the password is 11 one oh password is pun how come something wrong we have did I think but let's check it on the AP side I must have misplaced something thing but let's check it so on click of login email ID is this and password is only now on click up okay button also I have not changed so let's on click up log login success is also there user data we have already got and in the locco storage in Flight customer you can see we have stored the data like this so we are able to login now one more thing you can do if user is logged in we should not see this login and the register button right because in the local storage we have already data over here so in this key so on the page load we just need to read the data also so I will create a variable where loged user data any now in the Constructor I will read the data so constant is local local storage dog item we have to pass the key if is local is not equal to null then we know that in the local storage we have the data so then this dot loger data is equal to Json because while storing the data we have converted that into the string format if we have to retrive it again again we need to pass pass it so this variable we have to pass it over here now this variable we will use over here to show and hide the button so this login and the registration button will be only visible if star NG if if this is false if it is undefined let's just test it one more time and one more anchor tag I will add to show the logged in user name if it is not and and and instead of here we will show the logged in username so log loged user data dot email ID email so let's just test this functionality and if it is login also means if we are showing this data then we need to show the log of button also so here log of let's write the log of function also on log of we are just going to remove the local storage data and we will just uh clear this variable also so here local storage dot remove [Music] item and this is the key which we have to remove and this variable also we have to make undefined let's just test it now so currently we are logged in because in the local storage we have the data so you can see if we are logged in we are getting we are able to see the logged in username that is also from here and the log of button if we say log off you can see again login button is visible let's try again so the email ID was Rahul the.com the password somehow got pun I will check it by the time you use the API it will be proper so on the page load it is not visible because once we do the login we have not set that data into this variable so let's just do that also so that once we do the login we will able to see the proper logged in username so we just have to add this over here that's it so our login and the registration path is Success now in the flight component means uh in search component we have to prepare the object so you if you remember we have created the booking object now in Constructor again we need to read the logged in user data so that we will just copy paste from over here we need this data over here and if the logged in user data is there we just need to assign Dot customer ID mean logs in logged in customer ID with DOT user ID let's check the local storage one more time like in which field we get the user ID yes user ID only with I Capital so this will go over here so we have in the booking object we have got the customer ID flight ID we will get it once we click on the book now so you can see in in the wherever we are showing the book Now button that is in inside the flight for Loop so here we while calling this function we can send flight dot uh let's send the complete object or just need a flight ID now to this function we have to catch one parameter WR ID colon number now once we click this function the in the object means this booking object we have the flight ID so we need to assign it so booking object dot flight ID and whatever the parameter you get that you need to assign it over here so this flight ID will go over here now in the booking object we have got two field flight ID also we have got customer ID also we have got booking date is also there total amount is not necessary you need you don't need to pass because I obviously we are not integrating payment integration and everything just the booking part is what we are concerned now the LI remaining part is flight booking so these members are going to be available like who are going to travel this we are already storing in the flight list so now on click of save ticket or book ticket we need to call our APM so that is just the last part let me just complete it quickly book ticket now on click of this book ticket actual last API we will integrate so click on book ticket let's create this function now here in the booking list in the booking object we just need to do one more thing so this. booking object dot flight booking Travelers we need to assign but that will coming that will be coming from the passenger list so this variable we have to push it over here then we can make the API call so in the service again we need to add where is the service service master so here you need to make our API call so that will be book ticket let's get the API URL endp point so that is nothing but book ticket only so let's ticket and the object now this function we have to call in the search component over here so this DOT master. book ticket and we need to pass this dot booking object do subscribe result colon any if result do result extra check alert ticket booked success and we have to close the model popup also so that is nothing but close model function we have to use so this. close model and if we Face an error we have to show that so lse block is mandatory so alert RS Dot message now I will just add a debugger over here and I will show you like how object got prepared Also let's click on S let me just show you the bookings also if we have the booking so on get all flight booking AP I'm showing let's execute So currently we don't have any booking right now let's try to book a ticket now so let's I'm trying to form chhatrapati shii maharash terminal Mumbai to Pune on the date 9 on click of search we will get the data then let's say I'm booking Indigo flights so on click on book now let's add a member let's say I'm traveling let's enter some other number Plus then Rahul is also traveling let's enter D mobile now other card number now on click of booking ticket we will hit our functions so let me just show you that also how object got prepared so now in Booking object you can see flight ID is already there customer ID is also there customer ID we have read from the local storage flight ID we have got once we click on that book now and now in passenger list we have got the passenger what we have added in in the table so you can see so once I have 10 so now your booking object is proper so flight members are also there booking dat and everything just the total amount is zero that is zero that is not mandatory to pass click on continue you can see result we have got true now let's check the API if we are having the booking yes so you can see we have got the booking so now the booking ID is two now we need a API where we can show get see get get passenger Leist by flight ID so let's check our flight ID our flight ID was four now let's say Airline system login and they need the passenger list for the particular flight ID so for execute I'm not sure about the API but let's try yeah so you can see Jan and Rahul seat number also got assigned automatically now you API are there but I'm limiting my video up till book now only now you just have a gate all get all flight uh booking also get booking by flight ID and if you need a passenger list for a particular flight ID that also visible so this is how we have completed the flight booking application again I will try to cover the extra things in one of the video but just this video was already long so from admin we are we have created the flights and from the website if customer log in we are able to book it also so the whole flow we have covered now just some things are remaining like we have to show the bookings if we click on the booking we need to get all the passengers who who have booked it like those thing you can do apis are already here you just need to integrate it that's it with this current video please do like and subscribe if you are finding my videos helpful

Channel: LEARNING PARTNER

Views: 9,214

Keywords: flight booking angular, flight booking app angular, flight booking website angular, flight booking project, flight booking project angular, airline booking management system, airline ticket booking angular, airline ticket booking app angular, flight ticket booking angular, flight ticket booking app angular, angular 17, angular 17 projects, angular project, mini project, angular project from scratch, angular project for begineers, angular tutorials, angular 17 tutorials, angular

Id: Dmvx2EPKOy8

Length: 123min 55sec (7435 seconds)

Published: Tue Feb 13 2024