Job Portal Application In Angular | Naukri Clone | Angular Project | Angular 17 Projects

welcome back guys this is another video where we are going to create an job portal application website right simply just example I'm taking from the no.com so what are the things we have to implement when we talk about the job portal application right so front end will be angular uh HTML I have already created that I have already shared in my repository that I will be posting in my video description you can download the HTML and then you can use that HTML in your angular project right so let's just discuss what things we are going to need when we say about job uh job portal application so let's say we have an application where multiple companies will register right so I will show you the API also on freemen project.com you will find the apis in that let it load so many AP are here but of that eom J job portal so this is the these are the apis which you you are going to need so many apis are there because job portal will have so many scenarios so for that number of apis are there right so when we talk about job job portal application there will be two types of user first is employer right then we will be job Seeker right so employer means number of companies who are hiring for any job right so what employer is going to do he will create a job post right so whatever the requirement he has he will create a job post for that requirement right then that job post will be visible to job Seeker right he can can see all job post right then once he see the job post he can apply to it right by by reading the description whether that job is suitable for him or not he will apply so apply right once job Seeker apply that application will be received by the employer for that particular job can see all job applications right then he can uh make that shortlisted uh whatever the status he can see and what let's say employer selected that particular job application as uh shortlisted so job Seeker also can see the status of the application right so this is an overall flow again the basic main things like registration and login page will be there right so we will have two we will have two roles employer and the job Seeker so registration will be available for empy employer also and the job Seeker also then obviously login page login page will be sing Single only based on the rule you will see some different things right so these are the various API we are going to have so now if you see the template this is going to be our landing page here from here we can have login and the regist registration button right from login and the register we will open the login page and the registration page then you have a search box simply over here by which you can enter skill or anything let's say software developer marketing anything whatever the job title you are looking for location and number of of experience you are looking for right once you click on search it will navigate to the job page so this is a job page so here you can see we will have filters over here and all the related jobs will be displayed like this currently this is just a static right and if we click on the particular job it will open a job detail page here you can see particular ular job detail page is open if user is Success user is already logged in we will see only apply button or if he is not logged in a login to apply button will be visible over here right so just three basic pages I have created for now right so uh let's start with the angular first so project I have already created over here let me just close the another one this is for the template I'm been using but we are going to need it little bit right so project I have already created just the basic empty project is there I have installed the bootstrap and the font of font some also so next thing we need to add bootstrap and the font some link into angular.js so in angular.js in style we are going to add that right so let me just format it that's it right then we are going to run the application for now so Ng s let it run now let's discuss the component what components we are going to need so component so we are going to need login component then registration registration component we are going to need then landing page right where we are going to show all the uh means this page this is the landing page right so let's call it as a landing page or yeah landing page only okay then second component will be once user click on search he will R he will land to this page that will be jobs page so jobs page then job detail page job detail page means once I clicked on a particular job it will open this page right where I will show all the major information or whatever the job description that particular job has I will show it right so that will be job detail page these are the components which are needed for the website but one uh one more component we are going to need for the employer once employer register and he logins he will need a page from where he will create a job right so for employer let's say or one for employer extra component we are going to need is create job page and job listing page right same as for jobseeker as well we need to see as let's say I have logged in as a jobseeker I will apply to the multiple uh jobs right but I need to see somewhere like what are the status of my applications whatever the jobs I have applied I just need to see the status of all that right so for job Seeker we will create component that will be uh let's say my jobs right so in this component we will show the list of Applied jobs and with the status what the current status is right so these are the various components we are going to need right now so let's just create those component I will just create one component first in front of you then you can create all the components like that so folder structure just in the app folder I will create a folder like pages in inside that I will create all the component right so first component I will create then I will just skipe all the part so NG generate component first will be login okay so login component I have created so once you create the component four files will be created and one file will be updated that is app model right basic thing you can see four component has been created and one file has been updated so whatever the component you have created that will be added to the Declaration section in our app module so like that I will create the rest of the component so I will just skip that part now if you can see I have created all the components so as we have discussed we are going to name that landing page right so instead of Landing it is now home page home will make more sense right so all the components I have created in the app model also all the Imports are are being automatically added and in the Declaration section you can see all the component has been successfully added next step we are going to obviously need the services so in app folder I will create a folder that will be service right in that service I will just create a uh one default service that let's call it as NG generate service and let's say job okay so just one service I will create and in that service only I will cre keep all my API calls so this service I'm creating NG generate s stands for service service and then the service name that is job so in service folder you can see job service has been added right so pages is done service is done now in the app component next thing is like before app component first we need to create the route routing right routes also so this is an empty routes we we get when we create a empty project right so here we need to create the routes now first route I will create is for M uh what do we say homepage right because that is going to be my landing page so home component component will be login component sorry home component then all the components all the routes I will create it create like this only right so I have created all the routes for all the component login register jobs job detail new job job listing and my jobs so these are the all come routes which I have created let's save now routes are created after that we need we need a uh default route also so default route just a shortcut like you can add empty route over here path it will be empty then if path is empty we are going to redirect to which path if we don't have anything in the URL where you should so we are going to navigate to home right then path match property we are going to need and the option will be full right so this is a default route we are going to need then again Wild Card route also you can create but Wild Card route should be created at the end means if any URL user type which we don't have it will redirect to this so path inside that you need to add two star this is nothing but while C route and we you will redirect to home component if any compound uh any if you if user types any URL and that URL route is not there so it will land to the homepage only so two extra routes we have created default route and the Wild Card route let's save it so our app routing module file work is done now next thing is in our app component now this is the basic code we get so here we are going to have a nowar as I have seen you the template as I have shown you so this is my naar template right so let's go to the yeah here in HTML this is a now I will copy it and I will paste it over here let's save let me check if it I have run the application yeah so it is running on the Locos 420 let's see how does it look yes so now bar is visible this the missing is this no C app logo let me just add that in my asset folder all the images should go into your asset folder right so images I will just copy it from here and this image will go over here copy paste right now here we need to show that image right so instead of images now it will be assets.com let's see if we can see the image yeah so you can see image is visible now we need now image this nowbar is done but whatever let's say we click on jobs so we need to navigate to that right so for that we are going to need router outlet and that will be below the now bar so I will just create a container and inside that I will have router Outlet so router Outlet is responsible to show the activated route component right so every anywhere any application whenever you do the whenever you create the naar now before naar you should have a router Outlet because once user clicks on the particular navigation link that component should be rendered into the application so this is the place where that component will be rendered let's save now on the jobs let's just try to now uh we have created a jobs component right so instead of HRA it will be router link and for router link we need to pass the link of the jobs component so that will be jobs so this route name will be passed on over here right so let's save and check if it is opening that particular component by default home component is opening right if I click on jobs you can see job component is loaded right so our navigation is properly working uh one thing is here I have just added some body background color is there so this I will add in my app component to The Container fluid and what are the CSS I'm going to need I have kep that were in this particular CSS so I will copy this and put it in a global do CSS that will be style. CSS because this CSS are going to needed over all over all the application right so some background color is there now nowar has a white color right and remaining application will have some gray color right now first uh we are going going to create uh we will need a login and the registration form right because once user register like we have two types of user employer and the job Seeker so let's check registration API for first so you can see when we say we are going to register as an employer so we have one API that is add new employer so add new employer whenever user is uh whenever an employe whenever an employer is going to create an account in our job portal so these are the things we are going to ask him employer ID will be primary key so you don't have to send it company name you are going to ask email ID Mobile number company ENT State GST number logo also so these are the things we are going to need so in the registration component now we are going to need at least two uh what do we say registration component is the one right but that same component we are going to use for job Seeker as well and the employer also we will just uh make that UI Dynamic so let's open the registration component now in registration component we are going to create a form so again container I'm creating right in that container we will simply just design a form so we will create a row new class call Four then I will need label let's say what are the things we are going to need that forms that fields we are going to design company name right so company name then we will need a text box so input type boot step class we are going to add that is form iphon control placeholder enter company name right so like that we are going to create the form let me just get some proper design uh so what I have done is I have simply just Googled student registration form in bootst so I have just got this design so I will use this design so let's copy instead of writing everything just try to Google it right everything is available over there you just have to use that just format now on click of registration in the app nowar we should navigate over here so router link registration you route that is register route let's save and see our registration login page is registration page is coming proper if I click on register you can see registration page is coming but it has some uh padding let's see from where it is coming we don't have it to here container fluid is there I think because of that it is coming let me just see right so after making some changes our registration form is looking like this right so you can see whatever the fields we are going to need for the registration API for that I have created the simple form so HTML is pretty simple just I have used that uh example and simply I have added the controls right so you can see simply textbox text box is there now so this is an employee registration form so for that we have an uh we have an API that is this so let's just write out execute right so this is an complete API now once we click on the register we need to create an we need to make an API code so to make an AP call first thing we are going to do is in our app module we need to add HTTP client module to make the AP call we need HTTP client moduel over here so for that we need import statement so that will be angular [Music] slash common slash HTTP and moduel will be HTTP client moduel right one more input we are going to need that is forms model because we are going to use NG model right so forms model is we are going to need an HTTP client model so two things we have did HTTP client model and forms model we have added in the import section of our app model right this is just for the initial phase next thing we are going to need this object we need to create the object right so let's copy this object in component.ts now so employee employer obj colon any right so you can create class or interface but will increase the time that's why I'm creating here only with any but you should create the object with class or the interface right so employee object I have created now this employer object we need to bind it to all the controls right what are the elements we have now you can see our form is in the form tag so wherever we bind NG model name attribute will be mandatory now so and square backet round bracket NG model model equal to now we need to bind employer object dot now this is going to be common thing so again one more thing name is equal to so this is going to be common thing so I will just copy and paste it in all the text boxes just to save the time ID we are not going to need so let's just replace that then we just have to bind the properties only right so let's just bind the properties now let me just open it on the side window so that we can access this pretty quick ni so first company name we have to bind same property name or NG model and the name property then email ID name also email ID Mobile number like like this you need to bind all the properties here also same the company address is at the end so whenever we deal with addresses now try to create text area for that right then pin code state and city what else is remaining GST number and Logo so whenever company is getting registered we should ask company for something specific right so considering Indian market we are asking GST number so that we can say like it is kind of a unique thing every company will have right let's save now so we have created object and we have bind that object with all the properties it had to the form next thing is on the save we are going to make the API call so before making API call in the API we have created service right so in that we just need to create an API call function so for that we just need to create dependency injection of the HTTP client so private HTTP colon HTTP client right here we need to create an function that will be register employer opening closing and for this function we are going to get the object from the component so obj colon any now here what we are going to re return this HTTP API call will be post round bracket double code for post API two parameters will be there URL and the object so so URL will be this right so this will be URL this will go over here right so now in all the APA call this is constant right this up to up till this it will be constant so I will store that in a variable API end point string is equal to so that our code will look properly and this I will bind it as an over here plus this right now this API call is done now we just need to call this API call this function into our component right so first we need to create again object of our service so Constructor round bracket private now we need to create object of service so job colon job service right now we need to create function save create or register now here this dot job dot register employee and we need to pass our object so the object will be this do employe object do subscribe result colon any Arrow function and if you see the response of the API call you will get to see in all my API this is object I will return and an object message result and data will be the properties I will return so result is the property which will allow us to uh know like APA call has been success or not right data is inserted or not so if result is true so if Rees do result is true we will see like if uh we we can show the alert box like registration success or what the message also you will get like you can see username will be and everything you are getting so message only we can show so instead of the static RS Dot message right else whatever the message we are going to same message I will follow it over here right just in every APA call you need to have this structure right if result is true if success do something if not success do something right now this function I have to call on my button click so click event this function I will call let's just test it now right let's see what are the data we have in currently that will be with get employer let's try it out execute let's see what existing data we have So currently 1 2 3 okay up to six employ six we have the data let's try let's try we Pro company name let's say info.com mobile number let's add dummy mobile number let's add a dummy pH number right company logo URL let's just see proove logo I'm just uh we are not allowing user to upload the image we can simply use the logos we your images we have over here opening new image why it is opening as b64 let's see if we get the URL all Bas 64 opening let's try this yeah this image is available so image will be over here then GST number let's add Let's see we Pro VI 0099 right then City let's say pun State M PIN code right some basic detail inj phase two some address will be there now let's open the network Tab and let's see on click of register AP call is success or not on click of register yes so you can see registration success username will be your GST number and password will be GST number plus pin code so automatically username and password is getting generated right so if you can see in the payload whatever the object whatever the form we have filled that object we have created over here that we that is the object we have sent to our API and in response we have got the result true and employ already seven so now if I execute this again get all employer you can see the latest created employer you can see employ ID Vio has employe ID employer ID has seven that is a primary key right so our registration part is done that is just for the employer now next part is registration for jobseeker right so same component we are going to using so for job Seeker also we have a registration right so rather than creating another component for job Seeker registration we can use the same component right so now we just need a check box over here or we can add a button like uh we can ask while registration we can ask are you a job Seeker or the employer right so for that at the top I will be just adding a button so here row call 12 and here I will add buttons or instead of that normal we will use that button group so this I will use just to shuffle the UI are you or job Seeker or register as an employer right so let's just save let's just add text Center so that it will align in a center right so here you can see we have got two buttons now we have got two buttons but once I click on jobseeker only that jobseeker form will be available and If I click on employer this form will be visible and that button should be highlighted wherever I click that should be highlighted so for that we just have to create one variable so variable name let's say is jobseeker colon Boolean any variable you can create just to say like which button was clicked right now this we will use it over here so click function and in the click function this this button is for job Seeker so we can make this variable true over here and same like that we can make this variable false over here so rather than creating event I can simply change the value in HTML only right now this classes should be dynamic now removing this instead of the static class I will have NG class over here class if this variable is true then we will have this class otherwise this so BN hyon primary and BTN hyen success right so same class same NG class will be on the second Button as well this static thing we need to remove only static class will be button only so let's say and check all functionality should look like this right why both are visible okay here we have to add not over here right so if you can see wherever I click that buttons get active right so first part is done now we know with this variable we get to know like this is an uh the registration the user is registering as an employee or job Seeker so we can just create an extra du and we we can just use NG to hide and show if this variable is true means this div will be responsible to show the jobseeker form or else if it is false then our employee registration form so this is nothing but our employee registration form let me just put that inside that de let it so this D will be inside this D right job Seeker form for now just I'm for testing I'm putting that text let's click on Save and check so as you can see by default jobseeker is on so we can get that if I click on register as an employer so you can see we have got that employee form right now let's see what things we are going to have when we register as a jobseeker so add new jobseeker so if you can see when I want to register as a job Seeker so many information is there right because for job Seeker we need to ask their skill their previous work experience and everything but for registration purpose we can just send this object full name email ID Mobile number and experience uh experience status right and resume URL also so the basic things we can uh ask from the user so let me just copy paste some things from here it will go over here now just like the registration form we registration object we need this object also so I will copy this field not needed like you need to have all the object so in here just like employer employee object I'm going to create job Seeker object any equal to properties and ending right so basic things I'm taking right so this jobseeker object we need to bind it now instead of employer object it will be now jobseeker object let me just copy paste what are the properties we have that we need to full name first text box we are going to use that is for full name then email ID same thing is there then we have mobile number that is also same then we have experience status and the resume URL so experience status instead of text box we can ask it we can make it a drop down so select opt option value empty selected and disabled select experience are you fresher or experience so two options we can add pressure and same value will be over here just like that second option will be for experience experienced right now this NG model will go on the drop down and name property also mandatory so that's it class also we are going to need on the dropdown right so and one more thing is remaining that is for resume upload right so let's just copy this after this row we can put that now here we just need to provide the URL or anything so we are not allowing user to upload or anything so just whatever the URL he has we can ask him to register that so here it will be presume URL right again we will need that save button just like here let me just copy register as job s so another function I have created that I have to bind it over here so resist function was for employer and register as a jobseeker separate function so let's save and check right so you can see by default job suer was true so we are getting the jobseeker your uh form if we click over here you can see forms are getting changed right let's just add some spacing it is getting attached to that buttons so after this pb2 we can add so that we can have some space at the bottom right now it is looking fine now just like that we just need need to create another function for AP call so in service I will just copy paste this now register function name will be for a jobseeker right and API endpoint we need so API endpoint is add new job Seeker I will copy this so this is the method name which I have to put it over here that's it remaining will be same I mean registration component again the same thing just function name will be different right register as jobseeker and object we need to send is jobseeker object that's it so let's save and check if we are able to register as a jobseeker okay instead of company name it should be full name so let's just change that right so let's say sain ulker as my first name email suchin gmail.com mobile number let's enter dmy mobile [Music] number then experience let's keep it as experience resume URL let's keep it as a blank for now right on click of register we should see an API call okay we are getting an error so because we haven't send whole object or not sure let's just send the whole object so job scale we will send an empty object empty array over here then second field was job Seeker work experience let's try now okay so you can see if after sending all the properties our registration API is working so registration success username will be your email ID and password will be your mobile number right so by default username and password is getting created right so both registration and the job Seeker part is done next part is login right so let's create a login page let just see login template HTML CSS and let's try to find a login page suitable for our application just need a simple [Music] one form registration form let's use this okay it is navigating over here it is asking us to download let's see the simple one yeah let's use this on the code pen it has all the code so let's just copy the HTML and put it into our login component right so this was our HTML so let's copy that in our login component we need to paste the HTML so this is our login component let's paste our HTML putter we don't need so sign in is there and create account we don't need so let's remove that let's remove this [Music] S2 now on click in the nowar we had the login button right so on the on click of that we need to navigate just like register on login we need to navigate to the login page so this is our route that is login let's put it over here let's file save all let's see how does login page work it won't look good because we haven't copy we haven't copied the CSS let me copy this let's pasted it into the login component. CSS now here we we have the body but we don't have body so let's make it parent class and this class we will add our parent name before this we will add a parent and we can move whole code inside that parent so that it will act as a body call that let's save and check it yes so you can see now login page is coming fine right so now let's check the login API so login API only will be only single it won't be separate for job seeker and the employer One login EP just based on the credentials you pass you will get the detail whether it can be employer or the job Seeker right so this is an Logan EPI and this is an object which we have to send so let's create that object now ints login obj colon any equal to our object now let's bind this to our form so this is our form square backet round backet NG model login object dot properties username so this will go over here just like that password is there for that also we need NG model that's it so since our uh elements are inside the form tag so name property will be mandatory so we just need to add name equal to we can use the same field what we have used over here let's copy paste right now on click of sign button we need to make the API call so again click on login is the function let's create this function so this video is going to be long right because so many functionalities are there now coming back to HTML sorry service again right so we have uh we have created object we have binded that object to the form we need to make the AP Cod so in service let me just copy paste let's say login now our API endpoint login is the API endpoint so login all the aps are post only because we are sending the object so again this okay so Constructor is missing Constructor private job service right so we have created object of our job service then this dot job service dot IF function we are going to call is login we need to send the object so this do login object do subscribe round bracket round bracket result colon any Arrow function and here again that if statement R do result if it is true we can we can say user is successfully logged in right so alert user log in success else we can show whatever the message we get from the API side right so re. message that's it so let's check let me just show you what uh we have created two users right so let's just see the passwords for them project this is my database I'm using so job portal users so this was a user for employer this was the user uh for the V we have created right so this was a username so let's try this username password is this so it was a combination of your uh GST number and the mobile number or employer so when you register you will get that message like this will be your username and this will be your password name right so on click of sign in what is it pending yes object is correct right is taking time yeah so it took some time so in result you can say result is true user found successfully and in data we have got the particular user data so if I expand that you can see this was for vpro right so we have got the employer ID jobseeker ID will be null password we have got user ID username user role as employer everything we have got right so user logged in successfully we are showing right so if user is logged in we have to hide this and we have to navigate also somewhere right so let's write that code once user is successfully logged in first we have to store the data we have got for that particular user in the local storage so set item right we need to store the data job login user our key will be like this then while storing the data we need to Store with uh we are going to store the object but while storing the data into the local storage we need to convert it with in the string so json. stringify is the method and we need to pass r. data over here then we need to navigate also so we can navigate to The Landing Page means homepage so we have to navigate from function so we have to create instance of our router Router and and here this. router. navigate by URL and we need to pass our URL that will be home right so alert will be on the first line then we are going to store the data then we are going to navigate so let's save and check everything is working fine or not now let's try the same detail let's try another now email ID this will be my username let's try on click of sign in let's add 23 number debugger continue so not sure why logins taking some time but I will check right so you can see result is true and we have got the in result. data we might have got the suchin data right so you can see now he is a job Seeker so you can see employer ID is null and job Seeker ID we have got right so whole data we are going to store into local storage so if we check application and local storage currently we don't have anything but once that line runs we can see our data getting stored now in the application you can see Lo job login user and whole data we have stored then we are redirecting to the homepage right but we know that user is logged in right how can we know that user is logged in if in the local storage we have this key so this button should be hidden now right if user is logged in we should show the username or log out button right so for that in the app component we have to write just a small code in the app component let's remove this is logged in flag we can create with buan by default we can we can make it as a false then in Constructor we can check local storage if we have a data in the local storage or not user data local storage. gate item so while storing the data in the local storage we have created key that is job login user this we have to use it over here so we are simply checking like if in local storage we have the data under this key so if we have the data we won't get it we will get it otherwise it will be null so if equal to null means user is not logged in right so then we will make this variable true right now this variable we can use in the HTML over this over the both the buttons star NG if so this button will be visible if user if this variable is false so not same like that this also registration button will also be visible if it is false again we will need one button that will be for log out if it is true means user is logged in instead of this it will be log off and we need to show the username also right so before the button we can show just the username now this variable was responsible to check like user is logged in or not then we need to store the logged in detail also so user info colon any right if user if it is null then it is going to this e block we will need to add add else block if user data is not N means in local storage we have got the data means user is logged in then we need to pass the result because while storing the data we have stored in while con we have converted the data into string when we are retriving and we need to store that into again the object we need to convert it back so Json do par is a method so Json do par is Will convert string data into again object right so this user data we need to pass it over here and the user Ino variable we will use in the interpolation user inut dot username this property we need to show right so let's save and check now we should see the username and the log of button no username is visible but log of button is also visible something is not right so by default we we have made this variable false is user logged in so we need to make it false if it is null means false and in else block we need to make it true let's check now right so now it is looking proper right so this is how we have done let's see for button if we have a button with color so button link we can use so that that name is coming at the top right so instead of directly interpolating we can just make use of the button and adding this class on the button we will print it and this button link class I will add it over here let's save and check right so you can see loged in user user we are able to see and log of button also on log of we just need to clear the local storage right so on click of it on log of button this is nothing but we navigate to the some another page and we store we clear the local storage means user is not logged in now so in this function we just have to clear local storage do remove item and we have to pass this key and we know that user is not logged in so we just we can make this variable false again that's it so let's check this also one more time I save all So currently in the local storage you can see the data is there but if I say log of now you can see local storage data also got removed and again login and registration button is visible so our registration part and the login part is done so this was the first part of our application right now second part on the homepage we need to show the jobs right the template we have decided let me just open that project um let me just go to the HTML template YouTube no app this index page right so let me just open that I will open it in the new tab Now homepage we are going to start work so index so this is the code we are going to need for the Home tab so I will copy it and I will paste it into the home component right so let's save and check how does the phone component look now right so you can see we have the same homepage active now now here what we are going to do let's see if we have the API to search the job so I think I don't have it right now but I will create get uh get all job listing right so we can do one thing on click of search we are we are going to Simply navigate to the job page okay and whatever the jobs we have we are going to show that over there right so again after you will find currently I don't have that API ready but I will make it right so where do we have that search button yeah so this is the search button instead of site submit let's make it button now here we just need to navigate right so we can use router link slash we have to navigate on click of search button we have to navigate to the jobs page so let's provide jobs page over here let's sa and check if it is navigating so on click of search button you can see we are successfully navigating to the job space now here is the first functionality we have to show all the jobs we have right so get active job listing this is the API which we have to use right so one more flag is there in the job when we create a job we have some Flags so only one job is there before that let's create an employee first so that we will have a page from where we can create a job right so create new job listing is the API so if logged in user is an employer so he can create the job for creating job these are the fields it needs so let's login as an employer so let's log in as a vpro this is a username password sign in user logged in success why buttons are not hidden okay so once we login also then we need to fire that okay fine so now we need jobs page right so this is the content we have for the jobs this will I will copy paste in my jobs component in HTML let's file and save all so that we will have the HTML okay somewhere D is missing let me just see something is wrong let me check out this is an anchor tag anch tag is over here so we just need to close CL that yeah so now it is looking fine on click of search yes so you can see we have got that job page currently it is a static HTML now we need to make it Dynamic right so before that the logged in user is now we proo so if logged in user is employer we need to show one page we need to show one link that will be create jobs right so in app component where we have the link if logged in user is there now we need to store the roles also right so in user inut we have stored whole data now in of services create new job okay now this lii tag will be visible only if logged in user is logged in user role is employer so let's check the local storage like what is the exact spelling of that employer role application right so here you can see in user Ro employer is there so if user info. user Ro equal to equal to employer so let me just copy that so this link will be visible only if role logged in user role is employer right so create new job and once it is there we need to navigate also so router link and create new job this is a route let's just see if it is successful or not right so on click of create new job we are lending to the create new job portal now so for create new job these are the fields we have so job name that is nothing but job title created dat it will be aop populated we don't have to send employer ID we will get it from the local storage logged in user ID category ID so category ID is nothing but we have some Cate categories so get all job category like what kind of category does this job part right so human reses marketing and communication engineering it security us design teaching and training some job categories are there so that is that will go over there then experience are we looking for a fresher or the experience package what package we are going to offering location for which particular location we are going to hire and job description and is active and fall for this is the object so before that let's create the form I will again just use the registration form which we have created just like the same structure is there this whole D I will use let's close all in create new job so this is the HTML let's paste it we don't need this flag or itself do we don't need let's keep this right now we need to create that object so object is nothing but this object so I will copy this object for create new job so job obj col any right let's instead of created the static date we can pass the new date means current date right so on the front end we don't need to bind that experience package string right so our object is ready now we can just replace in one go by search and replace employ object with this right let's just bind the things what we have job name instead of company name we need to bind the job name so let me just do that then employ ID and category ID we need to bind right so category ID it will be dropped down let me just bind it for now experience again it will be also Dro down but I'm just keeping it package let me just bind then we will Design proper form and job description job description will be text area let me just remove that and it will be text area over here let's save right so we have got the form let's just design proper form now class container I will add then we can show a heading H3 create new job post right so proper form is going to be there so first is we are not going to need um this much big text box let's make it small instead of okay formula outline we have so instead of let's take row column call MD four is sufficient so let's make it four only okay so job name is there job title right then category now category is coming from another API so that is nothing but this so on the page load we need to call this API so in Serv first we have to create the function for API call so now this is a get API call so get all category that is nothing but job category so this do http.get right so just we need to pass this and end point we have already in our variable that's it and return from keyword now this API call we have to do on the page load now on the page load we have to make the AP so we have to implement the NG on init life cycle so NG on init sorry on init we have to import then we are going to implement it and NG on in it right so let me just format it now we will create one more function get job Tories so this dot okay so obviously again we are going to create a Constructor and uh that service object we have to create so private job service colon job service right and whatever the data we are going to get from that API we need to store it also so category list yeah any array is equal to empt array right so here this do job service dogall category that we have to subscribe result colon any right so whatever the response we are going to get from this API we need to store that into the category list so r. data because in data we are going to get the data now this AP this function we are going to call on the page load means in unit function right so on the page load we are going to make this API call and whatever the data we get that we are going to store into this variable now this variable we will bind it to the drop down on the category mobile there was category yeah here only so now instead of textbox we need drop down opt as a placeholder selected select job category then again we will have one option that will be dynamic so here star ng4 let category of our variable name then property binding so value we need to bind with job category ID so category dot let's check the property name what we are going to get that is job category ID so always try to copy paste the properties you get from the API if you do the spelling mistake then you won't be able to get the proper data right so in interpolation we need to show the job category name category dot our category name right now this thing will go over drop down let's remove this so first option was done this is Select category then we have experience also experience is again is a drop down only so but it will be a static option so we don't need this same we have created in home component so that only we can use sorry in registration component we have done this two option we can use over here right instead of experience this will go over here let's remove this so two things are done job title uh job name job title was done category is done experien is also done package let's see how does it look now then we will just redesign the form little bit right so job category yeah so you can see whatever the data we have got from API that is visible over here this was a static drop down right then what thing was there then package package then location package and location we can keep it in a one row let's move it let's add it over here four and location will be four and then the address so let's save right so job title will be like this is then job category we will select we are hiring for a fresher or experience package we are going to pass like two to two to three lakhs or anything location the city we are looking for it can be multiple comma separator we can add and the uh job description it is job description you can add an editor also over here because if you see no we can have some bold data link or anything but just to limit the time I'm keeping it as a simple text area right and on click of instead of this create job button now on this button click we are going to make the API Cod so click event create job function let's create this function into TS now right now we need to check the API so create job listing this is the API name right so again we have to go to service we have to create one more service that is going to be post API so I will just copy paste now our API in point name is create job listing this will go over here create new job right now this function we have to call from this function so this do job service do create new job we need to pass the job object job object then subscribe result colon any again if statement if result dot result is true we can show alert post created success and in else we can show the error message we get from the errors API only so RS Dot message right let's save and let's check if APA uh we are able to create the job or not okay one more thing we have to pass we have to read the data right so employer ID was missing so employer ID we can read in the Constructor so same thing what we have did in the app app component we have to read the local storage and everything same thing we are going to need let me just copy this let's paste it in the Constructor instead of this not equal to null we can add right so what we have did is we have we have read the data from the local storage if not equal to null we are again going to pass that constant data right so in data we have got the actual passed object and this job object do employer ID so employer ID we don't have anything in the form right so that employer ID means logged in user ID so that we need to read it from here so data dot let's check in the local storage what property we had application employer ID so let's copy let's paste it over here so in job object everything we have done remaining things we have we have kept it in the form so let's say and check let's try to create a job now so if you see currently in the gate active job listing we just have one job right so net for stack developer now if we create we should see one more right and one that flag is active true flag is there right so let's go to no three and let's try to get the data from there only jobs let's try this so this is my job title name so let will copy this this is my job title name then I'm hiring for these locations I will copy locations will be over here and this is going to be ITN information security or software right job category let's say pressure then package what they have send the package or not not mention so let's mention 425 LPA right and then description we need to add so description is nothing but this so I will just copy it and paste it over there right so everything we have done let's check the API call now on click create job okay we have got error might be the length of the character let's just reduce little bit let's try once again if we are able to create still error is coming why let's check the object so category ID is going created dat is also employer ID is also going pressure is going job description is there job name is also there location might be the problem let's just add one city because in database I might have the restriction let's create right so location was the problem right so you can see post created successfully now let's go over here and let's try one more time now we should get two jobs right so you can see two jobs are there okay so we have created uh we are done with the registration login if user uh logged in user is employed so we are able to show the we are able to create the job also but here in the job we should get the company name that is not coming let's check another API because in the job page we need to show the company detail also now like that this company name but that is not coming just employer ID is coming so with employer ID we need to show the company name and the logo also so let me just change the API first so I have changed the API and deployed it again now let's check gate active job listing we should get everything properly now okay so now object have completely changed so job name I'm getting package experience location category name right what is the job category logo URL company URL company name and job ID so these are the things we are going to get right let's uh let me just create two or three more jobs so that we can have proper data to show in the jobs page so I have created some jobs for various uh employer so you can see for imposes I have created then or TCS I have created then for Vi also we have created and one last one the UL now so this is for uh jobs create job is done now if we log off and logged in as a job Seeker so let's log in with searchin password empty continue user logged in success right so currently logged in with job Seeker so you can see we don't get that create job now if we land if we search and go to the land jobs component we need to get active job listing so this AP we have to call and whatever the jobs we have that we are going to show it over here currently that filtering part is not done but I will create that API then you can just use that another API and you need to pass the parameter but for now we will just bind this API right so this is the static data we need to just make it Dynamic so this is an API call so I will just copy this and in the service we have to create one new service just there that is a g API call so it will be over here get active jobs function I will be creating and this is a method I will need that's it right so in service we have created an API call for that function for that API call now in our jobs component we need to make that API call so in job component first we need to create Constructor DEET private what do we have job service right now again on the page Lo we need to do this thing so again on in it we are going to need implements on in it once we implement we need to implement NG on in it also right function to make the load jobs and here we are going to get job service. get all active jobs same thing is going to be over and over again but just the API call is there right create a function in the service call and make that API call over here now from this API call we are going to get the data right so we need to store that why is giving error okay right so job list any array mty so whatever the response we get from this API API that we are going to store in this variable so rs. data equal to why it is saying like that oh this was not supposed to be here Dot just bit do subscribe R bracket R bracket result colon any this. job list is equal to rs. data and this function we will make on the engine on in it so that on the page load we will make that API call right now we are going to get the active jobs in this variable so over here so call 12 is the thing that we are going to iterate so let me just remove the remaining thing on call 12 we are going to use star or call 12 instead of we can make in on the row only ng4 let job of job list right now we just need to bind the things so first is job title so here it will be job title so job dot let's see what things we have job name right then we need to show the company name so job dot let's see company name right then we need to show the company logo also so that will be property binding to this image tag so job dot logo URL this we have to bind it over here right after that experience right so instead of job dot do we have the experience or not yes we have experience package whatever the static thing we are just making a dynamic now so job dot package is there and location do we have the location yes so job location is done after that what do we have detail right so now we can show the Li lied job description over here so job dot description okay so we haven't shown the job we hav got the job description over here but let's show the job name in Next build I will send the job description as well and Dot we will use splice pipe splice 0 comma let's say 10 correct we will show after that dot dot dot what else we have few hours ago we can admit or let it be like that let's file save all now in the job page we should see all the jobs okay so you can see in TCS four jobs are there then after that TCS V Pro like that we have let just add some spacing in between so on the row we can add PT two so that we will have some spacing in between right so you can see job is visible now this is taking some so much space because PA is coming at the bottom let just try if we can manage that instead of [Music] this container floid is there container again that container is there we don't need this D let's see now we should have extra space yeah now it is coming proper so you can see job title company logo company name pressure or experience package location then here description will come currently I have binded just uh the title name let's just increase that little bit let's make it 50 right right so the first part is done we have shown the jobs if I click on this particular job it should navigate to the job detail now it is navigating right so but when we navigate we have to navigate with the job ID also whatever the job we have we have to navigate like that right so we just need to change in the route now now our job detail this component will be with the navigation right the job detail will have one parameter that is query parameter so that will be slash colon job ID right so whenever we navigate to the job detail page we have to navigate with query parameter that will be job ID so now coming back to job component we have the click event right over here so now we don't need the anchor tab tag but let keep that as it is or remove it HF with HF let's all together remove this HF anchor tag we don't need that because on the D only we can write the click event right so on the anchor tag or on the card also we can write so on this row we can write a click event so click event navigate you or open job and we need to pass job ID so job dot job ID we need to pass let's create this function now from this function we need to navigate right so from the front end we are going to get the job ID so that we will catch it over here ID colon number right so we are going to navigate from the do so obviously we are going to need the router service so private router colon router so now here this do router do navigate now instead of navigate by URL we can use navigate and for navigate we can pass an array with two parameter first parameter will be our URL that means job detail this is our query uh sorry route name then second parameter will be our ID so that will go over here let's save and check if we are successfully able to navigate to that particular job so let's say if I click on angular L net you can see 12 is over here let's go back let's try with this 10 is there so you can see whenever we navigate we have some different ID this is nothing but job ID now on this particular job detail component we need to read that also whatever the ID we have I mean squarey parameter we have in the URL we need to read that so to read that in the job detail component we need to create activated route service instance so private activated route colon activated route right and inside the Constructor we will just subscribe to the parameters so this do activated route do par do subscribe any here I will just add the debugger and we will create one variable active job ID colon number is equal to by default zero and whatever the response we get that we will store in this variable do job ID is equal to RS Dot job ID we will get what is the URL we have job ID in small case so that we will get it over here let's just save and see right so currently in the URL we have 12 as a job ID so let's reload and check so here you can see in the result we have got job ideas 12 right so that we are going to store in this variable right so now on the p P load we have to get the particular job information everything right so for that also I had that other page already HTML is developed so I will just copy that job detail let's copy the HTML part let's paste it into the HTML of that component let's save all and check it now right so once we get the job ID after that we need to make API call Now API call will be a API where I will be sending the job ID and I should get all the job information of that job so that is create new job listing see the API call G I have the AP call or not update job listing create job listing yeah get job listing by ID So currently we have 12 right so let's try that 12 execute right so you can see all the job information we have got here we got the job description and everything so this is the API call let's go to service let's create another function this is gate API call just URL is dynamic URL dynamic means just the parameter we have to send so this is the parameter URL along with parameter question mark job ID equal to so this will be static after that a parameter will be there that is job ID poon number and this job ID we need to pass after this plus concatenation that's it so our function is ready so on the page load sorry not here on the job detail once we get the job ID after that we need to make the APA call so now here NG it won't work we don't have to call on the page load once we read the data from the qer string then only we need to make so I will create a function get job detail this okay one more thing we need to create the service object so private job service colon job service so this do job service dog job detail function name get job listing by ID and for this function we need to pass the ID so that is nothing but active job ID we will pass it over here do subscribe round bracket bracket result call and any now whatever the response we get that we need to store into the variable so job obj any right so response we get that we are going to store it over here so this. job is equal to r capital r. data right so now this thing whatever the job information we had that we just need to show it into the readable format so same thing interpolation we have to do job object dot let's see what things we get job name okay so here again we are not getting the company name but I will send it in the API so employer ID is only coming just like the job active job listing here also I have to change now the experience so some things I will keep it like that only uh for no employer ID I will show Once you check the video API will be changed and you will get company detail also over here just like the image also you will get experience let me just make this change experience then package and then location here so go will be like that and here instead of this ulli I will be pasting the whatever the content we get in the interpolation so job object dot description right I haven't implemented the editor so if you have implemented the editor so you need to bind that using inner HTML so with property binding you can do that right so let's say and check if we can see the proper data okay something is not correct I think question mark we have to add right so undefined undefined error is coming that because we have to add the null injector object so question mark like this let save and check it now because on the page load we don't have anything in that object right so it will break still it is breaking no it is not breaking but we are not going to get the data also why let's check on the apaa call okay so API call we have did but we haven't called that right so in the Constructor once we have got the data then we have to make this function call like that don't make this API call in the NG on because we have to initiate this AP call once we get the data inace so this is the right place to initiate that AP call let's check it now now we should get that data right so you can see the data is visible let's go back let's try this let me just change the API so the API we were talking is get job listing by ID so this is the API okay so whatever the data I got I have simply re uh send it back now instead of that I need to make a join I will just pause the video for now so I have changed the object now we get the company name Logo URL and everything company address and email ID also so let's bind that also so we can see the proper data Sor in the job detail component so instead of this static we just need to bind job object dot logo URL this will go over here and here also instead of employer ID we need to show company name let's say and check if we are going to get the proper data yes so now you can see we have got the logo and everything right now one more thing we need to do now registration is done login is done job listing in the employer login we have created the job also in the job Seeker login we are able to see all the jobs we are able to open the particular job now we have to apply all also now if you can see if user is already logged in we need to write the same logic whatever we have written over here like if user is already logged in we need to show the apply button right so same code what we have written over here we need that so first we need to read the data from the local storage so here I will paste it user info object we will create right if logged in also this also we will create same logic to check like user is logged in or not let me just format right so if user is logged in where is that button right so if user is logged in then we if user is not logged in then we will show this button with false right but if user is logged in then we need to show apply button only sorry we have the already button so if it is false we will show login login to apply login to apply button if user is already logged in we will show the login button so that will be with not so let's save and check so you can see if currently user is logged in so we are going to get the Lo apply button now let's log off but still it is because we have to reload that functionality I will explain at the end something is breaking let me just check cannot read user role okay in the app component also we have to add that question mark so here question mark let's save and check right so now if we open any job we will see the login to apply button right now this button also redirect to that login page so this this will be router link Ash login button right so let's say user user is not logged in but without login also as you can see over here also without login also we can check all the jobs but if I click on login then it will redirect to the login page here we have the model popup but in our application we have the separate page right now let's try to login again now just apply part is remaining so we will complete that then it's almost over sign in Lo is done right so jobs let's open this now apply button is now on click of apply we have one API that we need to hit that is s job application now for this app for this API we just need to send job ID means this whatever we have in the URL then job Seeker ID the data from the local storage and the appli DAT and the application status we don't have to send right but just we can pass the parameters over here now in the job detail we just need to create one more object that will be job apply obj right so job Seeker we are going to get from the local storage so that will be over here so this do job application dot jobseeker ID equal to this do user info dot let's check the local storage what property we have [Music] application jobseeker ID this property we have to bind it over here right then job ID also we need to B job ID will be over here dot job ID whatever we get from the query parameter so this do active job ID so two details already we have filled in the object now on the button click we just need to okay here we can send new on the button click we just need to send this object right so where we have the button apply button right so here we just need to make an API call so click apply let's create this F function right so we need to create a uh service call in the job service right so that will be post so let me just copy let's post it let's check the URL for that that is send job application that's it now this AP call we need to make so this dot job service dot send job application we need to pass the object so this do job application object do subscribe round bracket round bracket result colon any and again if statement if rs. result if result is Success we can show alert box like you have successfully applied to the job job but if we have the error then we can show it in the else block else whatever the message we get from the alert box sorry from the API that we are going to show capital r is there let's make it capital r let's save and check if we are able to make the API call right so currently user is logged in so we can make the API call okay this we can skip on click of login now we should see an API call right you have successfully applied to the job let's check the object in the payload you can see job ID is also going whatever we have in the URL job Seeker ID the data we have got from the login which we have stored in the local storage right now this job this job Seeker suchin has already applied to this job but if I try to apply it again now I will get the error like you have already applied to this job right so this is how the same functionality is there in the uh no portal also now job Seeker has applied to this particular job now this application whatever the various users applied that we need to show into the employer login right so there let's check job application G all job application so execute some apis are taking some time to processing I will check like what are the joints and everything is there which is taking time right so you can see these are the various job applications we have so this was the latest job application we have did right now in employer login let's log off and log in with employer which job we have added I think for imposes we have added right so this was an imposes job 11 yeah imposes job so let's check the imposes login so osis login was with employer iio so this was the osis login let me just login with osis password so we are logged in with osis which is an employer so you can see create job is there now just like that we will add one more option to see the applications what are the job applications we have got so in the job listing we can show the applications we have received first in the job listing we will show all the job listing he has created and once we open we will show the applications he has received for this job so in job listing first we need to add the navigation link so I will just copy this and job listing route we will check this is job listing this will go over here job listing right so if it the logged in user is employer he will see two extra link create new job and the job listing let's see yes so in the job listing page we have to show all all the job that particular logged in employer has created so that will be we will have one more API that is we have it or not get job listing by get all job listing so we don't have API where we need to pass the employer ID then we can get the all jobs created by Him job Seeker ID get active job get all job listing get application by job ID get all job application get application by job Seeker ID right so we will need one more Epi so let's just create that quickly let me just pause it for the API part so let's reload and check I have created that API where we can pass the employer ID and I will we will get the job created by that particular employe employer so that API will be get jobs by employer ID so so let's say employer ID is five that will be in proces let's see what data here so you can see these are the jobs which was which were created by imposes now we need to make this API call on the page load of that my listing and we need to pass the employer ID from the local storage so here before that first we need to create the service right so it will be like this gate API is going to the so I will copy this paste it this will be my function name same over here employer ID over here so that our URL will be dynamic then instead of job ID it will be employer ID and this we have to pass over here right so on the page load of job listing we need to call this API again same thing Constructor private job service right again we are going to need the data from the local storage so let's just copy that code to read the data this will go over here logged in user data we are going to need not equal to null same code will go over here we don't need the else block user Ino is the variable we are going to need instead of bullan it will be any that's it right right so on the on the Constructor we are trying to read the data from the local storage then let's uh create that function get jobs by employer round bracket so this dot job service dog job listing by employer ID and we need to pass this. job info in that variable we will have all the data from the local storage let's check where we have the employer ID application employer ID this we have to pass then do subscribe round backet round backet result colon any right so whatever the jobs we are going to get for this particular job ID we uh particular employee ID employer ID we need to store it somewhere so job list call any array of objects so that's like this so response whatever we get we are going to stor into this variable right and this function call we are going to make it from here because once we get the job user input then only we need to make the API call now this data we will show into the table format just to keep it simple so row do call 12 table table or card anything you can use but just to save the time I'm using table right then T head inside that TR then th serial number and some things we will show like job title category we will show what things we are getting let's check package experience some things we will show package experience and location right so this was a tad then we will need T body in t body we will have TR and for loop on the TR so star ng4 let job of job list so that array variable we have to pass it over here then TD so serial number so that's why after this let Sr is equal to index and here Sr + one because index will start from zero then TD and inside that so then job do whatever the things we get job name let me just copy paste then experience what are the things we have in that same manner we need to show category we are getting or not yeah category we are getting second house category then package then experience so package experience and then lastly location right and one more like to open open sorry action button will be there and here in the last day we will have a button to open that particular job so button class BTN BTN open let's save and check if we are able to see the proper jobs now yes so you can see jobs created by osis are visible over here right let's try to log off and let's try to log in with v Pro now we should see another uh jobs created by Vio only sign in login success job listing you can see Vio has created only two jobs so that are visible for you right let's log in with again inos on job listing right now once we open right we need to show the jobs also so on that uh Open click we need to make an API call that will be get applications by job ID right so whatever the job applications we have got let me see job applications this is the table where we store the data once we apply so job ID 11 right so 11 is there or not it is taking so much time yeah so for job for job ID 11 we just had received one application that is this suchin T so that we can show in the model popup or anywhere right so that's it so this was a complete flow of a job Portal app from create registration login creating job applying job right and seeing the job applications we have received everything we have covered right so I will live this application on my GitHub Pages only so you can see the versions API I have already explained hope this video was helpful to you right try to in try to implement the same and put it in your resume or CV on the GitHub also so that interviewer will get to know like yes you have a working knowledge of how job portal work right so that's it with the current video please do like and subscribe

Channel: LEARNING PARTNER

Views: 6,069

Keywords: job portal, job portal app, job portal website, job portal app in angular, angular job portal app, naukri app, naukri app clone, naukri website clone, naukri app in angular, naukri app clone in angular, angular naukri clone, angular job portal website, angular job portal application, job portal application in angular, naukri website, job searching platform, angular mini project, mini project in angular, angular project, angular project from scratch, angular 15, angular, job

Id: YCBIWaA7UJI

Length: 121min 50sec (7310 seconds)

Published: Mon Oct 30 2023