College Project Competition Registration App Angular 19 | Angular Project

Hello all, welcome back to learning

partners. If you are new, please do

subscribe. This is another channel where

you can directly connect with me. We

have around thousand plus members

already who are working. We take live

coding sessions and everything. To just

get notified about those session, please

do join this

group. So in this video we are going to

complete a small project that will be

let's say a project competition website.

It's a website but it has API

integration and everything. Let's say uh

any uh what do we say committee or any

college is there which organize some

events over the time right various

different uh project competition or some

paper writing or something it can be

anything they organize them some project

competition or event competition

something right so they need a website

where they will showcase like what are

the ongoing competitions they have right

and they student can register to their

website and they can participate in that

ongoing competition so this is the whole

flow so there are two types of login one

is the college means who will they are

the organizer and another is the student

who will log in and participate in the

project so as I said like it's a website

so website should have a landing page so

this is our landing page here we will

show all the ongoing competitions and

just a basic information pass some

winners and anything right

then remaining things are let's say we

have a website landing page is there

then we have to show the competition

whatever going on this is like dynamic

with the API integration we have to go

we How to create the competition?

College will be creating competition.

Okay. Then we will have student

registration and the login page. Then

college login will be there. Login page

single same login page we will be using

but based on the role we will show some

details to the student some details to

the college. Then as student login we

will student will submit their project.

Then on the college login we have to

show the student list and competition

winner will be set by the college login

and will be visible to the student also.

The APIs which we are going to use it's

on the free API project free project

api.com. So this is the uh means you if

you go to the basic website this is the

main and you have to click on project

APIs all the project APIs are over here.

So project competition these are the

APIs which we are going to use. Okay

very few APIs are there. Now I have used

uh levelable AI tool just to create the

uh basic UI. So you can say this is the

again see uh so many guys are asking

like why I'm not providing the template.

You also has to uh get friendly with the

AI tool because this is the UI which I

have created by using the AI tool. So

you should also get familiar try to

create it. If not just contact me or my

team on the WhatsApp they will provide

you the template. So this is your

landing page where we will have some

basic information. Then we have this

registration page for the student.

College doesn't have to register that by

default login will be created for the

college login. So this is the first name

last name email address something

details are there. Then this will be our

login page. This is the dashboard page

of the college. Once uh college logged

in you will be able to see the uh

dashboard and same for the student also.

Some things will be hidden for college.

Some things will be showing to the

student login. Then this is how the

project submission form. So this is the

project submission form which we have.

From here student will uh participate in

the particular project and this is the

student list. Whatever the multiple

student have registered we just need to

show it to the college login. So this is

the list for that. This is the UI we

have. Now I have created a project of

angular 19. So how do we create the

project ng new then your project name.

Then it will ask you like what CSS

framework you need CSS last right. So

you need to CS select CSS. Then it will

ask you another u uh question like do

you need a server sign SSR enabled or

not? So you just have to say no. So once

I create the basic project so this is my

project. Okay. Again it's an empty

project only. I'm doing some things

parallelly because uh we I don't want to

waste the time over here. So once I have

created the basic project I have

installed bootstrap and the fontsome

because in my UI template I'm using

bootstrap and the fontsome. Then once

you install these entries of the

bootstrap and the fontasum will be added

to your package.json over here. Fine.

Then these are your third party

libraries. So to use it across the

application you need to add the entries

of the CSS into our angular.json. See in

the style section. So whatever the

external libraries you are using either

it's uh what do we say bootstrap or font

awesome or any third party library all

CSS we need to add it over here. Then if

you are going to use the JS so we have

to add an entry over here also in the

script section. Here I'm going to use

the bootstrap do.js because I have this

dropdown which will work fine if we use

the bootstrap

uh js.

Okay started now. So if you see these

are the multiple pages we have. So now

we have to create the component. Fine.

Now let me just go over here. Let's me

close it. So in app folder we will

create a pages folder.

basic architecture we will set up. So in

pages folder we will have all the

component which are going to be

connected with our route. Fine. So let's

open new

terminal. A new terminal will open on

that particular

folder. Ng

generate either you can

write full form

also then component. Let's say first is

like home component I'm creating. In

this home component, we will have our uh

what do we say the landing page. Fine.

Now bar we will keep it into our app

component and the remaining home uh

landing page UI will we will keep it in

the home component. Enter. So this will

create our component. So

as so home component is created. Now

after that we need to create the

remaining component. So either you can

write the full form of generate and

component or the you can go with the

shortcut also ng g component and then

let's say

register enter. So this will also create

the same component. Fine. So let me just

create remaining component. I'm just

pausing it for

now. Fine. So you can see I have created

all the component. Now in the pages

folder you can see whatever the

components I have created that are

visible over here. Now once you create

the component next thing should be you

have to create the routes as angular is

a single page application so we have to

create the routes. So when we create the

project by default we get app route.ts.

So in this file we have to create the

routes. So by default pre in previous

version this used to be a module but now

it's just a constant file. Here we are

creating the route and this route we

will be accessing into our app config

over here. Fine. Now let's create the

route. So as this is a website by

default particular page should default

be open right any web application what

we access by default some page will be

there so we will have a default route

over here so now route is nothing but an

object right so we have

path with empty redirect to if means URL

doesn't have anything where we have to

redirect so home and path m strategy we

have to specify full so this is my route

then we need to create another route

that will be home one so this is my

default route if we don't have anything

in the URL it will redirect to the home

route

component home

component fine like this I need to

create the remaining component

now fine so I have created all the

component right what are the components

we created all component routes I have

created fine now let's close this we are

done with this now as I said this is

kind of a website structure so this

navbar we will keep it into our app

component fine so this is my HTML so

let's go over here let's copy the nav

bar so this is my navbar this I need to

put it into my app

component and after app component we

need router outlet as well router outlet

is a directive which is responsible to

load the activated route component.

Fine. Now let's run this also. Terminal.

Let's open new terminal on the parent

folder. ng. So enter. So this will run

your

project. Let it

compile. It won't work because we are

going to need the CSS. Just let me run

first. So local

420. So you can see something is coming

right now is coming but it's not the CSS

is not getting applied because the CSS I

have it over here for that now bar. So

this is my global CSS the CSS which are

going to be need in all the pages. So I

will copy this and I need to put this

into my global CSS. So I have style dot

CSS. So here I will be putting it. Now

you can see we got the same nav bar what

was available over here.

Understood? So we got the nav bar. Now

in home component by default you can see

if I don't put anything

sorry still it is navigating to the home

component because we have created our

default route. Fine. Now in home

component what we are going to have the

remaining section of the landing

page means this remaining section of the

landing page will be going into the home

component. Fine. So let's get it. So

this hero

section let me just copy whole thing and

footer we will put it into our what do

we say app component fine so let's move

this first and I will put it into my

home

component let's save

it and let's check it so now you can see

images are not coming why okay now it is

coming fine so now you can see the

Homepage is currently coming. Okay.

Now, so we got the landing page ready

again like it's just a copy paste thing.

You can also either you use chat GPT

bold tool or loable or cursor any air

tool you can use and just provide the

prompt like create me a what we will say

create me a website landing page using

bootstrap for a college project

competition. So it will provide you

something like this. All a tool will be

providing you similar to something like

this. Okay. Obviously theming and

combination you need to specify what

color combination what icons you need

like that it will specify. Okay now so

our home home component is ready by

default landing page is ready. Now first

thing is like we need the lo we need to

complete the student registration page.

So if I click on the register I should

be able to navigate to the student

registration page. So we have this

navbar right. So in our

navbar let me close this. So now here

you can see we have got register button.

Okay. So if user is not logged in we are

going to show this right. So on click of

it you can see href is there but href we

cannot use it in angular right. So what

do we have in parallel to the href?

Router link right to navigate from one

component to another from the HTML we

use router link just like href. So here

we have to import that also router link.

Fine. Then over here router link and

where you have to navigate. So register

page. Let's get the route of register.

Whatever the route name you created,

this is our route name. This will go

over here just like that for the login

also I'm

doing

login. Fine. Let's just say event check

if we are able to navigate. So if I

click on register, you can see I'm able

to navigate and register component is

also loading. Now I need the register

UI. So this is my register UI. So this I

need copy. So again we will go to our

register page. Let's get the content. So

this is my form. Let's copy. Now this UI

will go to my register

component. Let's

save. Now you can see register page our

form is coming fine. Now so here on

click of register we need to integrate

the student registration API. Let's

check the API. So if you check out over

here here we will have register API fine

if you check the object we got wait we

got full name email password college

name and role but in my form I can see

so many

things how come I am able to see so many

things okay I think I didn't provided

the prompt to the lovable correctly but

still so we will remove the unnecessary

thing so in your form this is the object

what you need to send to the API. So

only these things should be there. Now

role is going to be managed by API. Even

if you send it or not, by default it is

going to be student because as I said

college is not going to get registered

because the hardcore login will be there

already created for the college. So we

just need four things over here. Full

name, email, password and the college

name. Let's remove the remaining thing.

We don't need all those

things. So first name and the email.

First name and the last name is not

there. So we have full name fine. So we

will say full name over here. We don't

need this. So this is the first. Then we

have email. So email will be there. Then

we need password. So college is not

there. So let's remove

it. Department phone number is also not

there. So let's remove it. I think some

fields are in the submit project. Fine.

And compon password also we don't need.

Then agree terms also we don't

need. Let's

save. Okay. So we got full name, email

address and the password. Only three

things are there. Let's see if it we are

missing anything. Okay. Sorry. College

name was there. We removed the college

[Music]

name where it

was. Okay. Let's use this over here.

Full name and then college name. Fine.

So you can see we got the full name,

college name, email id and the password.

Now on click of create account we have

to execute our we have to integrate our

this register API. Now we are moving

towards the API integration. Again we

have the form also. Now in angular we

have two types of form template form and

the reactive form. So I will start with

the basic then as we move ahead with the

different different component I will

slowly you start using the advanced

concept also. So for now I'm going with

the template form because that's easy to

understand and relative relative also.

Now we are using the template form. So

template form gets identified by using

ngmodel directive. So whatever the

things we have it over here we have to

integrate with the ngmodel directive

with our object. Now if you see the

object this is our object. So we need to

copy it and in our component ts we have

to create a variable. Let's say resistor

obj. I'm going with any for now. Again I

will be creating class interface but for

now I'm going with any. As I said I will

be going with very basic thing. So what

we did we created a variable and inside

that variable we have stored our object.

Fine. Let me remove

this. Now this object we need to bind to

our form. Let me close

everything. So this is the object which

we have created. Now this object we have

to bind to our form means not this

object particular field. So we have to

use ngmodel for that. So if you are

going to use ngmodel you have to import

forms module into the component itself

like this. Okay. Then this object you

need to bind to all the input element by

using ngmodel directive. Round bracket

square bracket ng model is equal to your

object dot what will be the field full

name. You need to bind it over here.

Okay, like this I will

copy. Then second is the college name.

So here this field I need to

bind. Let me

copy. So email

address and the password is there. Let's

bind the remaining field. Password will

go over here and email will go over

there. Role we are not going to do it in

the UI but by default we will send it as

empty. API is going to insert some data

to into the role. by default student. So

it doesn't matter if you send it or not

but because API is going to handle that.

So we created object that object we have

binded to the form by using ngmold

directive we imported this. Let's save

and check if something is wrong over

there. As a UI developer now always your

console should be on. If I navigate to

the

register so if you check the console we

are getting an error. So error is if

ngmodel is within a form tag you need

name attribute present. So if you are

using ngmodel inside a form tag then

name attribute is also mandatory. So

this is like name attribute and whatever

the property you bind it over here same

you need to bind it. Okay let's quickly

copy paste and change the field

name

here password will

go email and college name. If I

save see now we don't have error. Okay.

Something else is there. Hash first

[Music]

name I think two. Yeah. Yeah. So you can

see we have two element with the same

ID. That's why we got the warning. Okay.

Now we can ignore that or let's change

it

also.

Okay. Now so on click of create account

we need to integrate our API. Now we are

moving towards the API integration. So

in angular if you have to integrate the

API what you need to do is first you

need to go to our app config. First of

all in angular we do the API call by

using fetch API also which is directly

from the javascript or angular itself

has a library that is http client to

make the API call. So in app config we

need to add provide http client

instance. So

provide http client. This is what you

need to add. It's an array right? You

can see provide change detection is

there provider router and provider HTTP

client. This is what we have added. So

whenever you have to make the API call

first thing you do is pro you need in

provider sorry you need to add provide

HTTP client. Fine. Now let's close it.

Now we can make the API call. So for now

as I say I'm going with the basic. So

now we can create the service also but

for now I'm creating API call into my

component only. From component only I

will be triggering the API call now. So

we have to inject our HTTP client

service. Okay, how do we do that? So

HTTP is equal to inject and then we

register HTTP client service over here.

So this is how we have created the

instance of our HTTP client service. Now

we need a function on

register. Fine. Now from this function

we are going to make the API call. So

this http dot post API call it is if you

check the swagger documentation see the

method of the API is post fine. So post

API. Now we need the URL. Let's just get

the URL. So this is my

URL. This URL will go over here as the

first parameter. Okay. Now let me close

this so that we can see properly. Post

API need two parameter. first URL and

what object you need to store post API

normally we use to create new object

into the database to insert new data

into the database. So obviously this is

your URL. So what data you need to

insert. So we need the second object

that is nothing but our second parameter

that is nothing but our object. So this

object we need to pass it over here. So

this dot like this then we can

subscribe. So subscribe is like this is

actually which is going to trigger this

piece of code. Okay.

subscribe

result colon any we are just going to

have the subscribe block error block I'm

not writing for now if API call is

success our subscribe block will execute

and here we will simply show the alert

box

like

student

registration success fine let's add a

debugger since we are making the for the

first time Let's add a debugger and

check it also

properly.

Okay, let's try integrating the API call

now. So let me show you the existing

data

also. If you see over here get all user.

Let's paste it. So currently you can see

I just have one record response. Okay.

Now we are going to register. Let's say

I'm registering with my

name college name let's say PC

something chithan at the rateg

gmail.com and password 1112233 something

password I'm passing okay again uh as I

said I'm going with basic uh form

validation if you know it you can have

that pattern also like minimum character

maximum alphabetical numerical like that

let's try to inspect now if I click on

create oh we forgot to to add the event.

See, we created this function, but we

didn't call this function on the create

button, right? So, we have this button

over here. We will call our function.

So, that will be click event and the

function name. Instead of submit, let's

go with input type button. Fine. Let's

save it and check it. Now, we have to

fill the form again. Let's do it

quickly.

So chithatan PC

email and password 11 1 22 33 3. Fine.

Now on click of create account you can

see our function got triggered. Now if I

use my mouse and hover on this see

whatever the data you filled into the

form that you got into the object

because this object we have binded to

that form. Correct. Now we are making

the API call.

Continue. Yeah we got the response. So

in the result you can see we got the

message like user registered

successfully means user is user has

successfully done the registration.

Fine. Now let's check the API again if

the data is inserted properly or not.

See user ID too. So whatever oh my god

role I think I forgot to pass it in the

API. As I said now role will be handled

by the API but I think it is not

happening. So what we will do now first

for now we will add the role as student

hardcoded anyway okay but by the time

you will check the API I will do that

change also you don't have to send it

even if you send it I will hardcode it

on the API side fine so student is able

to register now let's try the login also

so if you check the API after the user

registration you have immediately login

API for the login API what you need to

send email and the password again post

API integration because we have to send

the object right

now we have to go to the login

registration component work is done so

I'm closing this component now we have

to go to the login component now again

login UI is there correct so let's go to

the

HTML let's get the login

component this is my form let's copy it

and this will go to my login

HTML fine let's try to navigate and see

if the login component is coming

properly or not. Yeah, you can see login

component is coming properly. Now on

click of sign in we have to integrate

our login API. Now in the registration

API we have done the template. Now here

we will go for the reactive. So as I

said moving step by step I will move I

will be moving to the advanced part so

that we can use all the concept whatever

the concept you might have done from the

tutorial. All concept we have to use

while working on a project. That's how

you increase your knowledge. Okay. Make

sure whenever you are doing the project

now don't use template form at all the

time. Sometimes go for a reactive even

sometimes try the dynamic form. Try to

create the dynamic form reading the JSON

or something. Always go one step ahead.

Okay. Now so again this is the object

what we need to send. So for this we

have to create the reactive form. Okay.

Now how do we create the reactive form?

So first if you have to use ngmodel you

need to import the forms model. If you

are going to use reactive form, so you

need to import reactive form module.

This is the first thing.

Then login form

colon form group. We have to create is

equal to new form group round bracket

curly bracket. Okay, this is how we

create the reactive form. Now what are

the controls we have? Properties we need

to send that will be nothing but our

control. So email colon new form control

we will initialize with empty. Fine.

Then second control will be our

password. So let's

copy password again new form

control like this. So we have created

our reactive form. Now there are two

ways to create the reactive form. First

by using form group and second by using

form builder also. Okay. So make sure

again you also while practicing

sometimes go for form group, sometimes

go for a uh that service also form

builder. So we created for this form.

Now this form we need to bind to our

login form. Let's open it side by side.

Now in reactive form whatever the form

name you have created this form name you

need to bind it to your form group by

using form group

attribute over here like this. So this

form name you have binded to your form

tag. Then whatever the elements you have

so email address. So here you need to

bind form controller name is equal to

then your control name. Control name is

email. So you already specified this is

my form. So it will going to find this

control is there or not like this. Then

on it

password here password will go fine. So

we created a template for reactive form

and that form we have binded. Now we

don't need this remember. So let's

remove

it. Now on click of sign in one more

thing. So some as I say like we should

go for input type button but we can go

for input type submit also but if your

button type is submit on the form level

you can write the events. So that

is so that will be on sub submit event.

Okay. Now on click of submit we have to

write our

event. So this will be our function.

Okay. So on click of submit button this

function will trigger. Okay. Now as I

said in the registration we have done

the API call from our component only.

But now we will create the service. So

instead of writing the API call into

your component directly now we will be

creating our service. Fine. Let's create

a service first. So in app in folder we

have just created a pages folder. Now in

app folder I'm going to create one more

folder that will be to store the

services.

services fine now in services folder I

need to create my first service that

will be our let's say user service ng

generate service and

user fine so this is my user service got

created let me show you see this is what

service looks like okay above the class

you can see this is my decorator if you

open any component above the class you

can see this is component decorator this

is injectable decorator means service so

these are various types decorator. This

is a class decorator. Again, so many

decorators are there. We will see

whatever we are going to use now. So

instead of doing the API call into

component, we can do the API call

function into our service also. That's

the best way because our component

should not have what do we say any

complex logic component should be only

responsible to do the manipulation or

the uh dom manipulation of your HTML

template your services logic some

utility function whatever the logic you

have that should move to your service

okay that's what like that single

responsible uh single responsibility

principle we have to follow from the

solid right so now Now in service we

have to inject our HTTP service. So I

can do private http colon http client.

So this is the old way how we used to

inject the service from angular 16 we

got that inject but this is also

possible. Now

on user login a function I'm creating

now from this function whenever I'm

calling this function from my component

I'm going to pass the object right. We

need to pass the login object. Huh? What

user id and the password we email and

the password we are going to pass. So we

need to catch that over here. So obj

colon any again I'm going with any but

in the next component I will be creating

class and interface. Now return this

dohttp dot post api call. Again it's a

post API call only. Now let's get the

URL. Now the URL will be almost same

just method name will get changed. So

from register we will copy this

URL. So this will be

constant. Then just login my method name

for

the we need to

change. Okay. Now as I said first APN

needs to object. This is the URL and

second is the object. So this function

is going to make the API call and

whatever the response we get that is

going to return. Fine. Now we have

created our service. Now this service we

need to inject into our login component.

Right? So over

here

user

service inject what we need to inject

our user

service this one. Okay. Now here this

dot user service dot currently we just

have one function. This function needs

the parameter. Now here we don't have

the object we have the form. So we have

to extract the object from it. So

constant form value is equal to this dot

login form dot value. Now you will get

the object from this and this object we

need to pass it over

here. Dot subscribe

sorry dots subscribe round

bracket. Now there is something new.

Sorry, let me

just set

next

colon. Just write the syntax. Wait,

wait, wait. Something is wrong. I'm

trying to find the I'm trying to find

the another syntax. What we have got

next.

Sorry. Round

bracket. Okay. Now here we can

have next

something I'm missing. Subscribe. We

have done. Let me write it one more

time. I I'm not used to that another

syntax. Subscribe. We will do.

[Music]

Wait, wait, wait. So this function is

returning observable type of

data. So the syntax was inside this we

need to write the curly bracket. Then we

can use

next like this. This will be your

subscribe. Then

error colon like this. Okay. So this is

the new syntax what we have. This is

your success and if something error

happens this will execute. Okay. Now

here we will say user

found means once API call is

success and we will say

navigating user found only. Okay. Now

from the login API now we are going to

get the response. Let's check it first.

So this is my API right? What was the

credential we

created? Uh this is my email

id. Let's try the login.

This is my email and password was I

think 11 1 22 33 3 4 3 only. I'm doing

the wrong

password request body. So you can see

wait why it is saying invalid

credential. Okay, invalid credential. So

we are getting the wrong credential. But

if I remove the 44 this is my actual

password test

endpoint. So here you can see we got the

complete object user ID we got and the

full name we got means you user is

successfully logged in. Okay. Now, so

this API call we need to integrate.

Let's try it

now. Let's add a debugger over

here. And if error is there, it will go

to over here. And where we will say

wrong

credential. Let's add a debugger and

both the places over in the next and in

the error also. and in the service also

because from component we are going to

make the API call over here. Let's save

it and check it

now. Okay. Now, so the user ID was

Janthegmail.com and I'm passing the

wrong password first.

Now on click of sign in you can see we

have got triggered our API function from

our login component. Now if you see in

the form object you got the object. See

from the reactive form we have extracted

our object what we need to send to the

API from component we are making a we

are executing a function from our

service. So now it will go over here and

see whatever the object we pass that we

got it over here. From here actually we

are making the API call and once the API

call is success it will return the

response. So continue. Yeah. So see we

got into the error block because

credentials are incorrect. Okay. Now

let's pass the correct credential 1 22

33.

Execute. Now here you can see we got the

correct credential.

Continue. Now see our next block got

executed. Okay. But here we didn't catch

the response. So we need to catch the

response. Whatever it is sending right.

So for that we need to write result over

here and whatever the result we get

means the user detail we got right. So

that uh in the response we are getting

the what let me show you we are getting

the user ID. So this user ID we will

store to our local storage.

So this user id we need to store into

our local storage or session storage

because on the browser level we need to

store somewhere which user is logged in.

So this user id will store

it. So local storage dot set

item student id and what we will store

result dot user id like this. I will be

capital and we didn't specify the data

type that's why it giving error if I say

any now it is you can see error is not

there capital user ID fine and then we

are showing the alert user found now

let's do it one more time because

current this is the new code what we

have written let's try let me clear the

local storage

first so

jithanthegmail.com

1112233 on click of sign in we will get

the API

response. See over here we got the

response and from that user ID we are

storing to the local storage in the

student ID

key. If you check the local storage now

you can see student ID we have got. So

now user is logged in. Now here if the

user is logged in instead of showing

this login and the registration button

we should have that other what do we say

drop-down right? Let me show you that.

Now our nav bar is in our app component

over here. So if user is not logged in

we have to show this otherwise we have

to show this dropdown other dropdown.

Okay let me see if that other dropdown

comes properly. Uh we might need the

bootstrap do.js but let's

see. Yeah you can see dropdown is coming

but we are not able to expand that

because it needs that bootstrap.js. So

let's add it also in our

angular.json over here.

It will be let me find the correct

path where it is

bootstrap bootstrap then list is there

then js and we need bootstrap.bundle dot

js. So this js we are going to need. So

this I will put it over here. Now I'm

adding the bootstrap do.js. Whenever you

make changes to the angular.json JSON

make sure you run your project again

because otherwise compile it won't have

the new changes. Fine. So I'm running it

again. So now that uh drop-down should

work. Let's reload. Now you can see the

dropdown started working. Okay. So if

user is logged in we have to show this

dropdown otherwise login and the

restation button. How we are going to

decide? So if in the local storage we

have the student ID means user is logged

in. Fine. So now what we need to do in

app component we will check if the user

is logged in or not. But that instead of

doing that in the app component and

reading the local storage data we can do

it in the con our service also. So

here

logged user id

colon string or number also anything

string is equal to I'm making it empty.

Now on the constructor I'm reading the

local storage data loged data local

storage dot get item and what's our key

name? Our key name is student ID. So

this key name will go over

here. we are reading the local storage

data. Whenever you read the local

storage data, we need to add a null

check. So if log data is not

null, then only we need to read uh the

data and put it into this variable. So

this dotlogged data is equal to log

data. Okay. Now, so in our service, we

have created a variable. This variable

will decide if the uh user is logged in

or not. If the if the it is if the uh

variable is empty means user is not

logged in. If it is has some ID means

user is logged in. So in our app

component we will integrate our user

service. Fine. So

user

service inject what we will inject our

user

service. Fine. Now in user service we

have that variable. So that variable we

can directly access into our HTML. So we

will use at theative control plus

statement if user id dot loged in user

id equal to equal to empty means our

user is not logged in. So we have to

show this

div and add the details. If user ID is

not empty means we have some ID over

there. So we have to show

this. Okay let's save this and check if

we are able to perform it. Let's save.

Let's save. Let's save. So currently in

my local storage I have the ID. So you

can see drop-down is coming. Okay. If I

let's say if I remove this delete and if

I reload again. So now you can see again

login and registration button is there.

Fine. Let's complete that log out

functionality also. So over here we have

this login log out button.

So here let's write click event on log

off. Let's create this function. Now on

click of log up we need to do two

things. First we need to remove the

local storage data. So local storage dot

remove item. What will be our item name

that is student ID we need to

remove and again that variable also we

need to remove. So this dot user service

dot log user ID is equal to by default.

We will set it as empty. Fine. And we

have to navigate back to the login page

because let's say user logged in. He's

currently on the let's say inside the

application some dashboard or page. But

if he logged off again we need to

navigate him back to the website. So we

need to inject we need to navigate him

back to the main landing page also. For

that we will use router

service.

Inject

router. Okay. And after this this dot

router dot navigate by URL. This is how

you navigate from your TS. So here I

will remove navigate to

home. Fine. Let's see if the login and

the every all thing. So by default our

user is not logged in. So you can see

login and the registration button is

there. Let's log in. 1 2 3 sign

in. Wait something is okay. So now you

see we got the error. If I reload it

everything will be fine. Okay. And after

login also we didn't navigate anywhere.

Right. So if user is successfully logged

in, we have to navigate to him in

dashboard or somewhere. So let's import

this over in the login component. One by

one thing we have to go. Let's add the

import. So if user is logged in

successfully, we have to navigate him

back to the home component. Fine. Then

he can navigate uh wherever he wants

again that menus will be there. So we

will navigate him back to the home

component.

Fine. And one more thing we will need by

default when user is logged in now uh

because we are on the login component

right but once user is logged in our app

component needs to run it again right so

let's see if that is happening or

not let's re let's do the log off again

first on click of log out you can see

login and log out button is coming and

we are navigating to the home component

let's try it one more

time 1 22 33 sign

screen. Yeah. But see this thing is not

there. But once I reload it is

happening. So this is happening because

in this user service when service got

executed for the first time there only

we are reading. After login again we

need to set this particular variable. So

that we can do in our login component.

So these are the small small issues you

are going to face. You need to handle it

like this. And you will be storing this

variable again over here. Now it should

work fine. Let's save it and check it

one more time. So log out

login. So see by just simply login page

also takes so much of time because we

have so many scenarios to handle. On

click of sign

in see now it is coming proper. If I log

out again I'm going back and local

storage data is also removed. Fine. So

first model we have completed that is

user authentication login and the

registration process is done. Now we

will uh first create the competition

from in the uh college login and then uh

use student will participate in that

proa competition

fine. So we completed the login and the

registration process. So as I said like

we have two main roles. One is the

student and one is the college. So

student will be registering for more

here and we'll be using the login page.

But as I said for college we will just

have the one user that will be created

by uh hardcore login will be there. So

in the user I have already created one

user that will be admin. So you can see

this is the user which will be admin

means college login will be this. So

let's try to login with

this login. This is your password

and sorry password I forgot. I think it

was admin only. Let's try admin because

password is encrypted. So I'm not

sending it back with the API in user.

Let's try it on sign

in. Yeah, we got the response and in the

result you can see we got the role as

admin. Okay. So if you logged in as a

college with the college user role you

will get admin otherwise it will be

student only. Fine. Now, so this whole

thing in the response you are getting

the whole object. Now this whole object

we need to store into our local storage.

We have stored the user id but we need

to store the whole response also. So in

login success we are storing the user ID

just like that local storage dot set

item. I'm storing the whole user

object logged user and when we are

storing the local storage data we have

to store it into the string format. We

cannot store directly array or object.

We need to convert it to string. So,

JSON dot stringify method we will use

and we will pass the whole object that

is result. Fine. Now, so this is what we

have done. Now in the college login, now

we have two roles. Obviously, if the

college logged in, we have to show some

different menu. If the student login, we

have to show some different menu. Based

on the role, our menus will be

different. Fine. So, that we need to do.

So, our nav bar is in our app component.

Right here we have our navbar. So in

navbar let's say home is there,

competition is there or these are the

menus are not there. Let's say we need

competition like college will be

creating multiple competition right

because multiple competitions are there

so they need to create it along with the

details we have. So we have the API also

for the creation of the competition. So

that we are going to first complete. So

our route for the competition

was wait I think I didn't create the

route. Let me check the API first. I

forgot or

[Music]

what? Yeah. Yeah. I have the API. See

competition ID API is there. Yeah. Post

API is over here. So we can create the

competition but we need the component

also for that. Let me just create one

more component.

ng generate

component competition.

Let me just create quickly the route.

So because from this page college will

be creating multiple competition. Okay.

So fine and this URL we have to put it

over here on router

link.

Fine. Let me check if it is running.

Yeah. So we are able to navigate to the

competition. Now in this competition we

are to in integrate this API. So if you

see the object we have competition ID

that is our primary key title of the

competition description start date end

and the status like it is going or

closed or uh hold whatever status we

need to give. So it's a simple form

right. So

uh let me check if we have UI for the

competition. I think I didn't create the

UI for creating the competition. Yeah.

Okay. Let's create a normal form for

this. Let's close

it or let's try charge

GPT. We will ask charge GP to create the

UI design form for this competition. So

this is our object. Okay. So what we

will do? We will copy this object. We

will paste it over

here and we will say I

need

CRUD UI

design for this object.

Now we need to specify like what

technology also right. So use

bootstrap

to design this. Again let's say you need

uh in a one in a single component you

are going to do the card operation. So

you need two card in one card you will

have

the list and another card you will have

the form. So use card design

row call let's say

call seven

for table and call five for

form let's

see it should give us the basic HTML

code yeah it is providing the basic HTML

because we didn't specify angle or

something we just provided like we need

HTML So it is pro it is providing the

basic HTML page. Let it write complete

code. See use AI like if you are

comfortable with UI and like you have

experience. So don't waste your time

writing or creating the UI. Use AI to uh

uh what do we say to remove that

unnecessary work and unnecessary time

wasting in just to design the UI. Right?

So you can save that time by using the

UI. Now we need this

Let's copy and this HTML code will go

over here. Let's save and check how our

page is

coming. So see we got the page. Okay. We

don't need this title. So we will remove

it. Yeah. So let's remove

this. And we need to match this with the

remaining things. So I will

copy where we had that. Okay. Let it be

for now. So we got the UI. So if you see

in the last in the second in the first

card we have the list of the competition

and here we will have the form. So

competition ID we don't need. So let's

remove that because that's a primary key

ID. Primary key. So we don't show the

primary key in the UI. So title we have

then description start date end date and

the status. So status by default we will

send it as a hardcoded one or new. Then

in the update mode we will uh update it.

So for now we will keep it. But in the

update mode only this should be visible.

Fine. So this is our form. Now this is

our object. So now in the login and the

registration process we have when we

created the variable we have gone with

any. Now we will use the class or the

interface. So you should not use any

whenever you are creating any object. So

let's copy this. Now I have to create

the interface or class. Basically class

I will create. So in src folder app

again I will create one folder that we

will say model in model first uh class

I'm creating for the

competition competition domodel

dot ts now inside this ts we have to

create a class so

export class

our computation

model these are the things we are going

to

Now we just need to provide a proper

data type to

this colon

number just like this. Colon string will

be over

here. Fine. Just like this. Let me just

replace it.

So whenever you do the API integration

now see what object you need to send

along with the API you copy that and you

create the properties like this. So this

is like a class you have created just

whatever the properties you have to send

along with your API that you will create

it over here along with the specific

data type. Fine. So since it's a class

so it will have an access to the

construct. So that's the error we are

getting saying like uh these properties

are not initialized. So what we have

it's a class so we can have constructor

and in constructor we will initialize

all the properties. By default it will

be zero. Then description it will be

empty. Start date is equal to empty.

Just I'm going with string

only. End date is equal to

empty. Status is equal to by default I'm

setting as new because as I said we need

to send the by default status from UI

when we are creating. So this dot what

is remaining title. Again we will

initialize this entry. So this is your

class will look like. Whenever you do

the API integration, see what object you

have, you will create a class like this.

Now in our HTML, so let's close this.

Now here we have to again we will use

the template form now.

So new object data type will be

computation

model is equal to new. We have to

initialize this particular model. It's a

class. So we can initialize it like

this. So whenever you do like this your

constructor get executed and all the

properties from your class get

initialized to whatever the default

value you said in the constructor. Fine.

Again as I said we are going to use

forms template form. So we have to

import forms module over here. Let's

open it side by side.

Now sorry I closed

that. Fine. So this is our class. uh

this is our form. So everywhere we need

to bind the ngm model. So square bracket

round bracket

ngmodel is equal to double close. Now

here our new

object dot see the benefit of creating

class it will provide you all the

properties of the intellisense right

like whatever the properties we have in

that particular class it will

intellisense over here. So now you don't

you won't make the spelling mistake and

uh any wrong property name you won't be

using because it is providing everything

right if you specify anything still it

will give you an error right so this is

strongly type what we do so this is for

title so title again name property also

we need name dot same property what you

bind it over here it will go over here

now I will copy and paste it over

Here year here

description here start

date instead of date time local I just

need date

only fine then we have end

date and here

status and same property we need to bind

it over

here. Okay. So, we created object that

object we have binded to the form. Now,

we need API call integration, right? On

clicks, we are going to need we are

going to do the API call integration.

So, for that we need the service,

right? So, in service now I will create

one more service. See if your project is

small it doesn't matter let's say around

five to six component or even 12

components or 13 components are there so

you can write all the services API call

function into single service also but

again just to separate your code you

should create multiple services

according to your module now all the

user related services will go function

will go over here now we are moving

towards the competition so all the API

call function related to competition

should be in a separate service so let's

create one more

service whenever you are appearing for

the machine test also. Try to create

multiple service so that you can you are

explaining to the interviewer like yes

we can create multiple services right

generate service according to the model

we should create it let's say

competition enter so it will it will

create our competition service now so in

competition service we need the API

calls

now let me close everything for now now

again we need to inject our private

create

http client fine now here we need the

API call so first will be like

create

competition now in all the API call our

URL is going to be common right so this

is the URL which will be common just our

method name is going to change so this I

will put it into my constant file so we

can go for the environment file also but

I don't want to make things complicated

so that's So I'm creating a constant

folder constant and inside this constant

folder I will be creating my constant

file

constant.ts and here we have to create a

constant. So export

constant okay

API URL and my common URL I will put it

over here normally we move this into our

environment folder but like considering

like you are fresher or some of us are

some of you are going to be a fresher so

that's why I'm not going with the

environment folder but same thing we

will do it over there also right you

have to those who experience you can

create the environment folder by ng

generate environments it will create the

folder and this you can move it over

there fine now we have created a

constant over there we have put our

common URL so now over here here also we

can use that so

constant dot API URL so now I don't need

this static everywhere else I will just

need the method name like this okay like

this now in our service also

So return this dohttp dot post API

call. So

constant dot API URL plus let's get the

method name for the create. So method

name will be like this. Let me just test

it. This is my

URL and we need an object because this

function we are going to call from the

component. So we will need an object for

that.

So

obj what type of data we are going to

get

competition competition model right and

this

object we will pass it as a second

parameter over here this is your API

call function for create just like that

let's create a get API call

also so it will be get

computation method will be instead of

post it will be get we won't need a

parame parameter because it's simple a

get API

call and let's check the method name

also

competition okay I think I forgot to

create API to just get all the

competition yeah we don't have

API just post API is there then we have

API

for okay so I have created this get API

which will get us all the computation

Just now I have created uh it will be

available in the swagger also but I

didn't deploy this yet. Okay. Now this

is this will be my get API to get all

the competition. So this is my method

name. So this will go over here a simple

get API. Okay. Now we have two API call

for create one for the create

competition and one for the get on

computation. Now this API call we need

to integrate into our component. Fine.

Let's move back into our computation

component. Now here if you see we have

created this object. This object we have

binded to our form also. Now we on click

of this save we need to integrate our

API. So click on save. Fine. Let's

create this function

quickly. Now our API call function is on

service. So let's create instance of our

service

also is equal to inject. What we need to

inject? computation

service. Fine. Now here we need to

integrate the API call. So this dot

computation service dot currently we

have two API call function but on save

this function we need to call this

function needs a parameter. So this dot

new object we will pass dots subscribe

round bracket curly bracket

next arrow

function. Fine. Now this will be our

success call. This will be our error

clock. If API call is success this will

execute otherwise this. So here we will

say

alert competition created. Fine. And

here we will get the error. So that

error we will show it over here. Alert.

We will simply say API error for

now. And just like the same method we

need one more to get all the

competition. Right? So let copy

paste get all. And instead of this

create computation, it will be get

computation. We don't need object

parameter for this function. Now we need

a variable also to store all the

computation we get. So grid list colon

what type of data I'm going to get a

list of this. So array of this like

this. Okay. Now whatever the data we get

that we will get it over here. So this

dot grid list is equal to here I will

say

result API response we will catch it

over here. Then this we will store it

over here. What is the error? Okay. So

now you can see here we have specified

the data type of this like in this

variable we are going to store array of

this but this function we didn't specify

the return type right. So here also we

need to specify the return type. So

colon observable type of data we are

going to return and competition model

array like this. So everywhere you need

to provide a proper data typing so that

it will match what data we are going to

get what data we are going to store and

this function we need to call on the

page load. So we will imple we will use

our life cycle event that is on

init and then ng on init and here we

need to call this function that is get

on fine let's just format

it now we our two API call functions are

ready get and the post now get we will

get the data over here this we need to

iterate on the table so here you can see

this is the tr we will have so at the

rate for control statement I'm using on

this array we need to iterate and this

tr will go inside

this here we have to show the serial

number so dollar index we will use

indexing will start from the zero so we

have to increment by

one then here

interpolation item dot what it will be

title let me just copy paste this

We don't need edit and delete

functionality for now. So let's remove

it. Here title is there. Then start

date. Then end date. This is what date

we are going to get. So let's add a date

pipe also. To use date pipe first we

need to import the date pipe. So over

here pipe we need to import then we can

use the date pipe. So start

date

slash date and we can pass the format.

So

DD-m

y just like this. Copy and paste it over

here. Let's format it properly. Fine. So

everything is ready. Now we just have to

test

it. Uh this is static. Why static is

visible? Okay. Okay, I think we have

currently we have one record over here.

If you see the API, currently we just

have one data over here. Now let's try

to create let's say competition is like

uh paper presentation competition is

there description something start date

let's say it is going to start from

uh 1st of

April and

then sorry June to 30 June. Okay. And

status by default. Okay. We are setting

by default as uh new. So it doesn't

matter. Let's check the API call. One

more thing after save we didn't call the

get API but let's see if competition is

getting created first. So on click of

save one API call is there and return is

2.1 means competition got created. Okay.

Currently it is not visible because

on on click on success of save we didn't

call this function. So this function we

need to call it over here also. So that

once the competition is created we will

again call the get API. So the latest

record will be visible. Now you can see

paper presentation is visible. Now if I

say

web fista something name I'm giving

description let's say it is going to

start from 15th of the

June until

last 30. Okay. If I click on save

competition created and you can see the

latest record is visible over here. Got

it? So we are able to create the

competition. Okay, update and the

deleting you can do because I need to

complete so many things. So I'm skipping

the edit and the delete part. But uh the

same thing I have create completed in so

many tutorials. So just refer any and

just complete the edit and the delete

operation. If I have the time I will try

to complete it and push the code also.

Fine. So we are able to create the

competition. Now this competition we

need to show into the website. Fine.

Then user will uh participate onto that

the students. Fine. So let's start on

that now.

So now after creating the competition if

you visit the homepage on the homepage

we have to show the competition. See

these are the competition cards we have.

Now in the competition I don't uh means

in the competition table I didn't create

the image but we UI we got it like this

but instead of image whatever remaining

data we have fine. Now in the homepage

we have to get all the competition and

that competition we have to show it over

here according to the date and whatever

things we have fine so on the home

component we just need to integrate this

API get all API this service we have

created right so see the benefit of

service like we have created this one

function at over here so now wherever

you need the competition data you can

just integrate this service you don't

want to you don't have to create again

api call right now let's do it quickly

Okay. So that is our home component. So

in home component also we need to inject

our service. So that will be SRV is

equal to inject. What service we are

going to inject? So

competition. Fine. Again on the page

load we need to integrate. Now see uh

till now we have done the normal GP

integration. On the page load we are

making the get APL and we are storing it

into variable. But the problem with that

now we have to unsubscribe that also

because you are creating a subscription

object that will stays over there. So

that will cause the memory leak. So

another way is like we can use the async

pipe. So here I'm explaining another one

topic. So instead of creating a variable

subscribing and then storing into that

data I'm going to create an observable

type of data. Let's

say

computation list colon uh dollar. So we

are going to store observable type of

data. What type of array I'm going to

store? So computation

model array of

this new

observable. So I'm creating observable

type of variable over

here. It's simple variable but in that

that variable we are going to store

observable type of data. Now in

constructor what we can do this dot

observable is equal to this dot service

dot this function. So see here I'm not

subscribing whatever the data I'm going

to get it from this function API call

function. I will subscribe directly into

the HTML but for that we need to import

a sync pipe. So a sync pipe we need to

import. Then in home component where we

have

computation. Yes I think this is the

div. Yeah. So let's remove the static

one and here at the red for loop. Now

here our observable and we will use a

sync type. So like what we used to do we

used to subscribe and then store into

variable. So that thing we are directly

subscribing into the HTML directly.

Okay. Now this will go over here. Let me

just

format. Now over here we don't have the

image. So let's remove the image. Now

here we have to show the title. So curly

bracket curly bracket item dot title

will go over

here. Then here we have to show the

description. So description let just

save it and check if we are able to see

the competition. Currently we have just

two comp three competitions. So E right

you can see the competitions are

available over here. Right now we don't

have the image. So that again like the

template got created considering it's a

project competition. So it has assumed

like so many fields will be there

because I have used the AI but in our

object we don't have so many things. So

title we have uh AI invitation. So this

we can remove here we have to show the

end

date. So here it will be item dot end

date and again date pipe will be there.

So we need to import the date pipe also.

Date

pipe and

here date

sorry date pipe

and parameter dd - mmmmmm - y y y y y y

y y y y y y y y y y y y y y y y y y y y

y y y y y y y y y y y y y y y uh teams

we don't have it so let's remove this

also let's say okay so you can see date

is coming according to whatever we said

so whatever the competition we created

that are available over here now. So we

logged in as a we have to loged in as a

student now. So I think we are logged

okay we forgot to show the logged in

username also. If you check the local

storage student ID is there let's log

off again. Let's try to log again. What

was the user

API all user? So this was my user

ID. Let's try with login and password

was

admin sign

in. So when you are logging we are

storing the whole object also. So if you

check the local storage see logged user

data and here you get the username. So

this email you need to show it over

here. Over here username is there now.

So there we need to show the email. So

when we were doing when we were doing

the login part, we store the data into

local storage and in our service also.

So let's create one more variable

logged user data colon. What type of

data? We didn't create the interface or

class for the user. So let's go with any

fine. And by default we will say

undefined.

And over here just like we have done it

over here. Ah one more thing when you

are storing the object we have converted

it into the string format. So again when

you are reading it back you need to

convert it back to the uh object format.

So for that let's remove one more data

constant logged user data local

storage dot get item our key name. So

key name is logged user. So this we have

to pass it over here. And this same

check we will add it over here.

And not equal to null means whenever you

are reading the data and you are doing

something so we have to add a null

check. So this dot loged user data is

equal to JSON.parse. So here we got the

string format. Again we need to convert

it to the object. So we have to use this

loged user data. We will pass it over

here. So in my service we have this

variable. Now same thing here also we

need to do just like we have stored the

user

id dot log user data is equal to

complete results fine now so we got the

data so that we need to show into our

navbar over here so instead of

this so it will be user service dot

logged user data dot

uh it will ask us to add email I

Let's check the local storage one more

time. Yeah. Email only. Fine. Let's

save. Let's save. Let's save. And

if Yeah. So here you can see admin at

thegmail.com means it's a college login.

We are able to see whatever the logged

in user is there. That name is getting

populated over here. Now we have

to we uh login registration part is

done. College has created some

competition. Now student will

participate in that production. Correct?

So the last phase like student will

submit his participation to the

particular competition.

Right? So let's do that. Now we will

login with the

student. So what was the student detail?

I think this one. Yeah. So let's try to

login with my

detail.

Let's wait we logged off. Okay. So in

log off also this recent variable we

created just now. So in log of function

we need to remove that also. So again in

app component just like this we have one

more data right that is logged user.

We'll go over here. Fine. Let's try to

login now.

This is my

username. 1 22 233 was my password. On

click of sign in user

found. See we are logged in. Now in home

component we are showing all the

competition. Let's say if I click on

view detail I should navigate to the

submit project with the competition ID

because this is the competition user is

going to participate. So on click of

view detail it should navigate to the

view that our post competition page and

there we will register for that

competition. So that's the component is

let me show you the UI first of

that it is yeah so this is the page. So

where here we will have the form for

submit project and here we will show the

selected competition detail also. That's

why we need a route where we will pass

while navigating to this page we will

pass the ID also. Fine. So now we have

to change our route a little

bit. So submit project. Now instead of

the normal route it will be

parameterized route. So colon

id / colon id now. So from home

component when we navigate to this we

are going to pass the computation ID.

Fine. Let's do that. So over here we

need the router link. So let's import

router

link. And over here instead of

href router link is equal to slash our

route name. Our route name

is submit

project and we need to pass the

competition ID. So let's use the

property binding because we need to do

the interpolation also over here.

static single quote plus here we need to

pass item dot competition id fine let's

save and check it if we are able to

navigate with the query parameter

now fine so let's see now so currently

we have three competition if I click on

the middle

one we have error let's check what's the

error I think parameter name

Yeah. So slash should be first then

this. Let's try now. Every time I get

confused with this now click of view

detail. Wait why

still. Okay. So you can see our URL is

getting formed like this student

project/2. That's

because this was correct over here. We

forgot to add the slash. Okay. Let's try

it now. Now if I click on the middle

one. See I'm able to navigate with the

ID again. Let's go to the homepage.

Let's try with the third. So whatever

the competition you click with that ID

we are able to navigate. Now in submit

project we have to first call the get

API because here we got the competition

ID. That competition detail we need to

show it over here. Correct? So we need

to make that another API call which will

get us the competition detail of the

particular competition ID. So the API is

this is the API. So let's say if I pass

two over

here see I got the current competition

detail. No

why I think URL is let's try it over

here. Some extra characters is going

over there.

ID question mark id is equal to

this or do we need a slash directly? Let

me just check the URL. Yeah. Okay. So

this should be our URL. So make sure on

click of edit you made you make this

kind of API. So this is our API where we

will pass the id of that computation and

that computation data we will get. So we

have already created a service for it.

So let's add one more API call. It will

be same like this just parameter will be

there. So this will be my URL over here.

Two should be static. So plus two should

be dynamic. So id colon

number and this ID we have to pass it

over here. get

computation by

id. Okay, this is the function and we

are going to get the single instance of.

So that's why we don't need it array. So

this function we need to call on the

page load of the this component. So we

need to read the query parameter data.

So now in angular whenever you have to

read the query parameter data. Okay,

let's just get the UI also. Let me just

get the UI of that submit project page.

Submit project. This is the

page. Let me just get the

UI. Let's

copy. This will go over

here. Right now in the in this component

we have while navigating to this

component we are going to have a

parameter query parameter in the URL. So

we need to read that and then we have to

trigger that API call to get the

computation detail. So for that let's

create constructor and we have to inject

activated route service

private

activated route

colon activated route and over here

inside the

service params dots subscribe. So

whatever the query parameter you have

you have you can read that query meter

by subscribing to them.

Okay. Fine. Now

here we will

say

current competition

id but I'm assigning zero. This we need

to assign over here. So this dot

computation id is equal

to result dot id. we will get whatever

the query parameter name you have given

over

there dot id. So this parameter name

will be whatever the parameter name you

give it over here ID. Okay. Why it's

giving an error? Yep. Okay. So we need

to specify the data type any over

here. Okay. So whatever the query

parameter we have that we will read it

over here. Then we need a function. Now

we have created API call in our

computition service. So let's import

that also. Service is equal to

inject

competition service. And let's create

another function.

Get by

ID this

dot service dot get computation of ID.

This function we need to call and here

we will pass our variable that is

current competition ID dot subscribe

round

bracket curly bracket

next here we will get the

data. Okay. Now whatever the data we get

that we need to store in two

variable

p computation

data we have created our model. So let's

use that over here.

Okay. Now this dot computation data is

equal to whatever the result you get. So

this you will assign it over here. Fine.

And this function you need to call

inside the subscribe. Once you read the

data then only you need to make this API

call not on the page load. Okay. Now the

data you will get it over here. This you

need to show it also. Where is the

competition

[Music]

data let us

see this is call it submission

guideline. Okay here it is. So here we

need to show display none we need to

hide here it will be let's say our title

name dot

title then

deadline this is again date pipe we have

to use so end date I'm not giving the

date for now this will be our

description

item sorry competition data competition

data dot description and we don't have

require requirement or

something right let's

save

and let's test it if we are able to see

the competition data whatever we

one currently it is three so you can see

deadline is soon let's go back let's

select the first

one wait why it is not

visible yeah now if I click on the oh I

forgot I didn't created the proper data

I

think let's check

the get API call if API call is going

proper

on the page load. Oh, it is giving four

not

four. We have some percent 20. So, I

think some space is there.

[Music]

H over

here. Let's try

now. Yeah, now API call is there. See

paper presentation and date is also

coming and description whatever it is

there. Right. So now you can see the

whatever the present whatever the

competition we selected that is coming

over here. Now here let me show you the

object of the

submit where it is

post. So here you need the competition

ID. So now the competition ID you

already have it over here in the

browser. So this competition. So now

here you don't need the drop-down of the

competition because you selected your

competition already. Correct? So one

more thing like one approach is like you

can use this ID and assign it to your

object or here you can show the

competition drop-down also and again you

can change it also. Let's say user

selected one but again he want to change

so he can change it from here also.

There are two approaches you can do that

we will go with the first one instead of

showing this we will assign the object

directly. So this is my object which I

want to pass to the API to create the to

participate submit the project. Here you

can see you have two foreign keys

competition ID and the user ID. User ID

will be logged in student ID and

competition ID will be from the URL this

competition. Okay, let's copy this.

Let's create the interface. Now we can

create a class or interface by using

some another site also. So that will be

convert JSON to TS. Some sites are there

which will allow users to create

quickly. So I have copied my JSON. So

this JSON we need to put it over here

and it will help us to create. See

according to the property and the data

type it has created. Now we are created

model. So inside same model I'm

creating export instead of interface I

will be going with class and here it

will

be

project and all the properties we need

to initialize again

constructor. Let me quickly initialize

all the

properties. So you can see I have

initialized all the properties.

Now let me just close it. Now in

competition we need one more API to post

it. Right?

So here let's copy paste and it will be

submit

project. Fine. And here our URL will be

let's check the

URL project only. Let's copy it will go

over

here. Fine. And our model will be our

project model. We will get like this.

Fine. So this is our API

submit. Okay. Now this function we have

created which is going to make our API

call and this we just have to call in

the uh from our component. Now we

created uh instance of our competition

data that we got it over here. Just like

that we have a form. So we need to

create the instance of our project also.

Project OBJ colon project is equal to we

need to initialize

it. Okay. Now we need to bind it. So

again template form is there. So we need

to import our forms

module. Let's open it side by side.

close

file. Okay. So we created this object.

Now this object we need to bind to our

form. So here you can see we have the

form. So we said like this we are not

going to use. So for now I'm commenting

it. Then project

title. So you can see we have text box.

So I can how we can speed up our

development. So we need to add ngmodel

in all the uh on all the input element

right. So what I can do

ngmodel is equal

to our object name is project

object dot then we need the name

attribute also. So name is equal to so

what I will do I will copy

this search form control class and then

I will replace that with this. So within

one click I'm replacing everywhere right

now here only it will get repeat or

let's remove that now here I just need

to bind the properties now so it will be

little bit quicker now so project title

same copy paste you need to

do this is description then copy paste

uh tags I think we don't have it now

yeah we don't have tags so let's remove

that team member number it's not

multiple it is going to be a single only

comma separator they can

add so it will be team

members properties we

have okay team members also we don't

have it so computer description GitHub

link project title

submission date. So, submission date we

need input. Oh, it's a text

area. Oh, sorry. I didn't check the form

properly. But anyway, you are you might

be able to understand

this. Submission date. It will go over

here and over

here. Let's remove the text area. And

here it will be date. Fine. Team members

block. We don't have it in the API. So

we don't need it over here. Then we have

GitHub URL. So GitHub

link then we have live URL is also not

there. I think I had that live

URL. Okay fine. Anyway, so remaining

things only we will project file also we

don't

need this also we don't need. Okay. So

whatever the object we created that we

have binded. Now on click of submit

let's go with button we need to call our

API. So click on

save. Let's create this

function now. So remaining things we are

going to get from the form but user ID

and the what do we

say competition ID we get it from the

URL. Right. So this dot project dot user

ID. So user ID we are going to get from

the logged in user id. So we are storing

the loged in user data into our service

that is user service. So let's create in

let's inject that service also. So user

service and here it will be user

service. Now this user service this dot

user service dot loged user ID. In this

variable we have the loged in user ID. I

think it is number and string. Let's

convert it into

number. Fine. Then we need the

competition ID. So competition ID we

have already got it into our

variable. This dot current competition

ID which we read from the URL. See over

here. Right. Then we need to make the AP

also. This dot service dot submit

project. And we have to pass the this

dot new project object dots

subscribe round bracket curly bracket

next.

Okay. Fine. Now let's add a debugger

over here also so that I can show you

like the remaining data we are getting

from the UI and some we are reading it

from the variables. Let's add it. Let's

add it and let's check it. We call the

function also over here. Let's save it

and check it

now. Let's say I'm trying to submit for

the I'm applying for the paper

presentation. So let's say global

warning something my project name some

description I will

have then oh my god team member we

forgot team member we don't have just

the label change okay submission date

today and something URL

now on click of

submit so now currently if you see the

project object some data we have got it

over here now some data we are going to

get from the our variable so user ID we

got competition ID we got. Okay. Now we

are sending rank and the status as empty

because that is going to handle from the

API. So let's click on continue. Yeah.

So API call is success. So we got we

have created the we have submitted the

project. Now our project ID was two. So

let's check the submission we have got

for the project

ID. Sorry competition ID. So competition

ID is two. Test endpoint.

Wait, what's this API by competition?

Let's check if the data is submitted or

not. Let me check

the I'm checking the database. Okay,

just give me a minute. Project

DB college project submission. This is

my table. Yeah, we got the data. Why it

is not coming in the

API? Do we have another API where I can

see all the projects submitted? This is

post API.

project API. So this is that

API

project/by competition and the

competition

ID. Where is the get API to get all the

competition

received. I think again I forgot to

create one more API but this should

work. The last API is like get

competition by competition ID.

Let's try to execute this in the new

tab

/2. Yeah. Okay. So, we are getting see.

So, one user got one user have

submitted. So, you can see for this

competition one project submission we

have got. Okay. Just like that. Let's

create one more

user log of register. Let's say

Rahul Rahul at the

rategmail.com. I'm keeping the same

password. Okay, because I because

password we are converting it. So I

won't be able to see it. 1122 33. User

is created successfully. Let's

log

aulthegmail.com. 1122 333. Now I'm

logged in as Rahul. Let's apply to the

project 2 only again.

Let's say first Chaitan has submitted

the global working paper. Let's say

second is like

AI technology. Fine. Some

description date let's say 20 something

URL on click of

submit. Wait why

we let's check the URL because we didn't

showcase the success and error. Yes. So

now you can see for this particular

competition ID we have got two

submission right. So now this submission

we just want to showcase. So now in the

college login see almost we have

completed you student is able to

register he is able to login college is

also able to login then college has

created competition and student are able

to participate in that competition with

this ID and by this API in the college

login now we have to show the

submission. Okay. Right. So for that

part let's say again in the college

login we can add one more page. We now

created

component. Yeah. All project. So here we

will show this AP. Here we will

integrate this API. We will have a

project competition dropdown. Once we

select the competition we need to

integrate this API and we will show the

all the comp participation received for

that particular competition. Okay. So

again like we have some more APIs to uh

declare the inner or reject it or

something. See approve or reject and we

can set the winner also. Again this put

APIs are there. So this uh this is just

advanced part. So this I will be

completing in the next video. So till

now what things we have completed? Let

me just overwise. So website landing

page we have done competition we are

able to show student registration and

login is done. College login is there

project submission is also done. student

list and competition these two models

are remaining. So this I will cover in

the next video following to this. Okay.

So again like if you are new and fresher

now so this project is really uh what do

we say a good example where you can have

role-based authentication some flows are

also there right so once I complete the

second partner you will understand the

whole thing like how and this is a

realtime application also so many

projects and so many so many small small

companies are also there who uh what do

we say some hackathons or some so many

competitions are going on right so they

need an application like this so this is

a realtime application which you can

create and you can use it for your

college or some companies also. Okay. So

I hope the project was helpful. Again I

know like some things I have skipped. I

will complete this in the next

video. Okay. So I will I will live

version will be provided in the project

description. You can follow that. I have

a YouTube uh means I have created some

groups for the YouTube subscriber. You

can join that. I take so many live

session. So just to get the notification

of those you can just join that live

session and you can directly connect

with me also with your query. Fine. So

that's it. Thank you. Please do like and

subscribe and add some comment also.

This will help me to grow.