User Login and Register Form Full Video (Code Attatched) - Angular 16 | PrimeNG | Json Server
HTML-код
- Опубликовано: 3 окт 2023
- #angular #primeng #angularproject #angular16 #angulartraining #angularprimengapp #login
This is a tutorial for User Login and Registration Form with the following concepts explained
1. Node JS Installation
2. Angular CLI Installation
3. Angular project creation using ng new with Routing
4. PrimeNG, Primeicons, PrimeFlex installation and setup
5. Angular cli component, service, interface, guard creation
6. Set up routing for different pages
7. Add the primeNG components like input , button
8. Create Reactive form with Validation
9. Create a custom validator for password and confirm password check
10. Submit the Forms
11. Logout
12. CanActivateFn implementations and applying Guar
Github Url: github.com/haseena-pa/angular...
Lovely explanation and got help when there was utmost need !!!
Thanks ma'am
Nice Video Mam..!
Very Helpfull for me...!🎉🎉🎉🎉
Please upload more video like this and CRUD operation in angular.
Вы моя спасительница! спасибо вам огромное!!!
I can't tell how much this tutorial helped to learn and implement together by watching video.
It's works like charm..
Thanks for your great effort and work.
Surely one day you will be on top of the coders channel here.
Keep growing!
Subscribed!
Great tutorial! Greetings from Mexico!
Very Very Helpful for me! thank you so much for it.
Please upload more video like this and CRUD operation in angular.
Nice explanation ...really amazing
Great tutorial! Please make more videos in Angular, Thank you so much, greetings from Mexico!
You are teaching very nice.
thank you very much!!! well done
Best Explanation!
love it💕💕😊😊
Thank you..
Nice video.
currently im having a problem when im in home page and i reload it the login page flashes for a moment, why is that? currently i implemented a guard that if the user is not logged in redirect the user to login page if trying to access home page.
good job
Can you do a video for creating login and signup page using angular,node js,mongodb,expressjs
good
Hi
How can i build this project , i did ng build but index.html is not working 😢
Please make more videos in angular
Hello Ma'am, Thank you so much ❤ for this amazing tutorial. Your idea of this project and explanation ❤, both are amazing.
One thing i did not understand. my interface is completely blank only the default code is there but still registration is working perfectly, the data is saved into db. how is this happening? i'm asking for only registraion.
Please reply and Thanks Again.
Thanks alot mam❤
Iam having a little question ...
If iam making a form with moving div
Iam hiding the signup div using another div which contains a button
How do i change the position of that div to hide the sign-in div instead of sign-up div
.. a little notice ...
they both at the same page i want to use that div with the button as a moving window to hide one of the sign-up or sign-in divs by moving the position of that moving div to right and left
i just cloned the code from github, But now Im not getting output. If I register means it shows like something went wrong. Even if I login with existing data, its showing something went wrong. what is the solution ?
Did you run the json server parallely as mentioned in the video?
How to update email in firebase authentication?
Can you please tell how to do same project in angular 17 because there is no.app module in that so.i am confused there is content on internet for 17 related to multiple forms connected to one another
Bro did you complete it in 17 ?? If yes then please share me the Source code of it.
why is that property 'fb' is used before its initialization
merci
In this how the Id in json is randomly generating
Ma'am, I ran your repository code, but it is also displaying an error. After clicking the Sign In or Register button, a Toast card appears with the message "Something went wrong." what can I do.
Please run the json-server command parallely as mentioned in the video. May be api is not connected
@@haseena.khader gotcha !!!!!
what extensions were you using?
Somehow when I create services it doesnt genereaate the same files that you have. I dont have app-routing.module.ts. Any help?
When you create an angular app using ng new, either you can give yes to the routing or give - - routing for adding the app.routing.module.ts. It is mentioned in the initial project creation step. If you missed, please give the command ng generate module app-routing - - flat - - module=app
Hello mam, which angular version you are using??? If its not 17 could you plz upload for 17 if possible??
it's not 17 ! i find the same problem because of that , untill i found that version is not matched !!!
@@ikrammahfoud3629
install angular 16th version using this coment
npm i @angular/cli@16.1.0
because this project is done is angular 16 v
Which database have you used to store the user details ? Json or MySQL ?
I am using json-server
I generated the project structure. I am unable find app.routing.nodule.ts file in my codebase. I tried ng generate module app-routing--flat--module=app but got an error class name is invalid. How to resole this issue
In Angular 17, structure is different. This project is on Angular 16. I will have a look
Where can I learn everything about Angular? Can you recommend books, websites, please?
I usually follow angular website itself
Hello , when i login i directs me to nothing i'm stuck on the login page
Did you added the code for navigate url to home?
If yes, is the url changing?
Please check the code which I have shared. If nothing helps, please share ur code
madam , I am using Angular 14 , when I am going to match the password using matchpasswordValidators function it's not working .
In Angular 14, custom validator is little bit different
@@haseena.khader okkk, thank you madam
We need to use --no-standalone to generate module ts file in latest angular version.
Command:
ng new angular-login-app --routing --no-standalone
2) add "useDefineForClassFields": false property in tsconfig.json file under compilerOptions
"compilerOptions": {
"useDefineForClassFields": false,
//other properties
}
how ti insert theses prime links in style.css files?
Using @import
I installed everything, but still the classes are not getting applied. Pls help me out
Please make sure the Primeflex installed. Check path in angular.json or style.css
Hi mam, how to prevent multiple tab open on the same browser just like whatsapp web
Sorry I didn't get the question.
when I'm trying to login or register its showing as something is went wrong please may I know whats is the issue and how can I solve it..
Did you run json server in parallel?
no
@@haseena.khader
Please run that... That is the backend in this tutorial
can you please reply how to solve it
In the tutorial it is mentioned to run a command using json-server
Or watch the below one for installing json server
ruclips.net/video/KoJocWH15io/видео.htmlsi=vwBPAm82vFbSDSkU
5:30 where did u get the node modules of theme ?
While installing primeng you will get some themes also
I had the same issue using Angular 17 which apparently the new versiion forces npm to instal as a standalone module. Inorderwords you'll need to use flags to force get modules
Thanks a lot that was way too helpful 🎉🎉❤
I am having a question in here 💭
What if I am making an edit personal info form and there is a current password and new password inputs how can I connect the value of the current password with the value of the password that is in the register form ?
If you wanna show the current password in edit personal info form, better user types it and on submit you can validate. It is not secure to keep the current password in edit page
@@haseena.khader do I use the same validation way you used for doing that?
No.. That should be validated in the backend
@@haseena.khader oh , well I am not very familiar with connecting to the backend API 's
Have you made a video about that ?
Not yet. Now only frontend tutorials.
Mam how we will add this datas into mongo db
Instead of json server api you have to call backend api
@@haseena.khadermam can you make a short video plz
Sorry Sayooj. I am more on frontend technology.
Thanks,All your videos are very important for me because I am using this in my project and I didn't know about it but your videos are very helpful for me only one request if you have not push some code on git then push it.
I think I have pushed the code. I will verify again.
Thanks
Repo is uptodate. Last changes was the guard. it is there already. Let me know if you face any issue
@@haseena.khader ok,thanks👍👍👍
I bet you are a malayali mam.
i dont have the same files as mentioned in the video
and instead of app-routing-module.ts i have app. routes.ts in my inventory
what shuld i do?
Angular 17 structure is little bit different.