User Login and Register Form Full Video (Code Attatched) - Angular 16 | PrimeNG | Json Server

Подписаться 2,3 тыс.

Просмотров 48 тыс.

50% 1

#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/has...

Опубликовано:

7 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 86

@sanatanShishya1521 Месяц назад

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!

@NatnaelDereje-tv6ix 4 месяца назад

Very Very Helpful for me! thank you so much for it. Please upload more video like this and CRUD operation in angular.

@germanvillegas5010 3 месяца назад

Great tutorial! Please make more videos in Angular, Thank you so much, greetings from Mexico!

@user-cr8he2bu5l 10 месяцев назад

Вы моя спасительница! спасибо вам огромное!!!

@chandramohanj4619 5 месяцев назад

You are teaching very nice.

@hiteshbeniwal9732 9 месяцев назад

Lovely explanation and got help when there was utmost need !!! Thanks ma'am

@aravinthkumar7405 11 месяцев назад

Nice Video Mam..! Very Helpfull for me...!🎉🎉🎉🎉 Please upload more video like this and CRUD operation in angular.

@hgtechvideos 6 месяцев назад

Nice explanation ...really amazing

@shamsundar1675 4 месяца назад

Best Explanation!

@SureshM-z1s Месяц назад

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 }

@albertoleon5801 9 месяцев назад

Great tutorial! Greetings from Mexico!

@MadaraUchiha-es6pi 4 месяца назад

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.

@vitorfernandes4265 10 месяцев назад

thank you very much!!! well done

@hagarmosleh5910 2 месяца назад

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

@sayoojsnair4788 6 месяцев назад

Can you do a video for creating login and signup page using angular,node js,mongodb,expressjs

@hagarmosleh5910 6 месяцев назад

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 ?

@haseena.khader 6 месяцев назад

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

@hagarmosleh5910 6 месяцев назад

@@haseena.khader do I use the same validation way you used for doing that?

@haseena.khader 6 месяцев назад

No.. That should be validated in the backend

@hagarmosleh5910 6 месяцев назад

@@haseena.khader oh , well I am not very familiar with connecting to the backend API 's Have you made a video about that ?

@haseena.khader 6 месяцев назад

Not yet. Now only frontend tutorials.

@EnglishJaat 9 месяцев назад

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

@AnkitTiwari-qt5ds 7 месяцев назад

Bro did you complete it in 17 ?? If yes then please share me the Source code of it.

@Tyrannne 7 месяцев назад

Nice video.

@MomLifeJournal 8 месяцев назад

Thank you..

@muhamedasanali.l628 9 месяцев назад

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.

@haseena.khader 9 месяцев назад

Please run the json-server command parallely as mentioned in the video. May be api is not connected

@muhamedasanali.l628 9 месяцев назад

@@haseena.khader gotcha !!!!!

@AliCanYucel-bo4yo 5 месяцев назад

good job

@codebinary1388 7 месяцев назад

Hello mam, which angular version you are using??? If its not 17 could you plz upload for 17 if possible??

@ikrammahfoud3629 6 месяцев назад

it's not 17 ! i find the same problem because of that , untill i found that version is not matched !!!

@SathishKumar-qy9vi 5 месяцев назад

@@ikrammahfoud3629 install angular 16th version using this coment npm i @angular/cli@16.1.0 because this project is done is angular 16 v

@UsmanAshfaq1 8 месяцев назад

love it💕💕😊😊

@allchill3470 5 месяцев назад

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.

@sumit22873 11 месяцев назад

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.

@haseena.khader 11 месяцев назад

I think I have pushed the code. I will verify again. Thanks

@haseena.khader 11 месяцев назад

Repo is uptodate. Last changes was the guard. it is there already. Let me know if you face any issue

@sumit22873 11 месяцев назад

@@haseena.khader ok,thanks👍👍👍

@sakyasamantaray146 9 месяцев назад

Please make more videos in angular

@informer9261 6 месяцев назад

good

@abdullaibak7403 4 месяца назад

I installed everything, but still the classes are not getting applied. Pls help me out

@haseena.khader 4 месяца назад

Please make sure the Primeflex installed. Check path in angular.json or style.css

@martingeneral9090 5 месяцев назад

Hi How can i build this project , i did ng build but index.html is not working 😢

@sarthakwagh1453 5 месяцев назад

Which database have you used to store the user details ? Json or MySQL ?

@haseena.khader 5 месяцев назад

I am using json-server

@SujithKumar-tv2nt 6 месяцев назад

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

@haseena.khader 6 месяцев назад

In Angular 17, structure is different. This project is on Angular 16. I will have a look

@vanjamihajlovic1605 9 месяцев назад

Somehow when I create services it doesnt genereaate the same files that you have. I dont have app-routing.module.ts. Any help?

@haseena.khader 9 месяцев назад

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

@senpainlazygamedev.4017 Месяц назад

why is that property 'fb' is used before its initialization

@hammamiaziz8590 3 дня назад

same problem

@albertoleon5801 9 месяцев назад

Where can I learn everything about Angular? Can you recommend books, websites, please?

@haseena.khader 9 месяцев назад

I usually follow angular website itself

@animeshchakraborty8685 8 месяцев назад

madam , I am using Angular 14 , when I am going to match the password using matchpasswordValidators function it's not working .

@haseena.khader 8 месяцев назад

In Angular 14, custom validator is little bit different

@animeshchakraborty8685 8 месяцев назад

@@haseena.khader okkk, thank you madam

@khaoularefaat4899 8 месяцев назад

merci

@nidhinkumars2490 7 месяцев назад

In this how the Id in json is randomly generating

@mehdib3607 10 месяцев назад

Hello , when i login i directs me to nothing i'm stuck on the login page

@haseena.khader 10 месяцев назад

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

@nazarobeziuk6150 8 месяцев назад

How to update email in firebase authentication?

@vivekanand7871 7 месяцев назад

Hi mam, how to prevent multiple tab open on the same browser just like whatsapp web

@haseena.khader 6 месяцев назад

Sorry I didn't get the question.

@HarshitSharma..8750 6 месяцев назад

how ti insert theses prime links in style.css files?

@haseena.khader 6 месяцев назад

Using @import

@tapatuti9047 5 месяцев назад

what extensions were you using?

@abhishekrawat8249 6 месяцев назад

5:30 where did u get the node modules of theme ?

@haseena.khader 6 месяцев назад

While installing primeng you will get some themes also

@ikekennedy4003 6 месяцев назад

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

@rabiyakhathoon3303 9 месяцев назад

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..

@haseena.khader 9 месяцев назад

Did you run json server in parallel?

@rabiyakhathoon3303 9 месяцев назад

no @@haseena.khader

@haseena.khader 9 месяцев назад

Please run that... That is the backend in this tutorial

@rabiyakhathoon3303 9 месяцев назад

can you please reply how to solve it

@haseena.khader 9 месяцев назад

In the tutorial it is mentioned to run a command using json-server Or watch the below one for installing json server ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KoJocWH15io.htmlsi=vwBPAm82vFbSDSkU

@sayoojsnair4788 6 месяцев назад

Mam how we will add this datas into mongo db

@haseena.khader 6 месяцев назад

Instead of json server api you have to call backend api

@sayoojsnair4788 6 месяцев назад

@@haseena.khadermam can you make a short video plz

@haseena.khader 6 месяцев назад

Sorry Sayooj. I am more on frontend technology.

@chandramohanj4619 5 месяцев назад

I bet you are a malayali mam.